/* ================================================
   SHLOMO PERETZ — Portfolio
   ================================================ */

:root {
  --bg:           #ffffff;
  --fg:           #111111;
  --muted:        #6b6560;
  --muted2:       #a09890;
  --gold:         #d4af37;
  --gold-light:   rgba(212, 175, 55, 0.10);
  --border:       rgba(180, 155, 90, 0.20);
  --btn-group-bg: rgba(0, 0, 0, 0.05);
  --card-bg:      rgba(0, 0, 0, 0.03);
  --maxw:         720px;
  --pad:          24px;
  --font:         30px;
  --he-font:      "Noto Serif Hebrew", Georgia, serif;
  --ui-font:      "Assistant", system-ui, sans-serif;
  --radius:       10px;
  --topbar-h:     52px;
  --cbar-h:       44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0e0d0b;
    --fg:           #e8e4dc;
    --muted:        #9a9186;
    --muted2:       #5a5248;
    --gold:         #d4af37;
    --gold-light:   rgba(212, 175, 55, 0.10);
    --border:       rgba(180, 155, 90, 0.16);
    --btn-group-bg: rgba(255, 255, 255, 0.07);
    --card-bg:      rgba(255, 255, 255, 0.03);
  }
}

html.dark-mode {
  --bg:           #0e0d0b;
  --fg:           #e8e4dc;
  --muted:        #9a9186;
  --muted2:       #5a5248;
  --gold:         #d4af37;
  --gold-light:   rgba(212, 175, 55, 0.10);
  --border:       rgba(180, 155, 90, 0.16);
  --btn-group-bg: rgba(255, 255, 255, 0.07);
  --card-bg:      rgba(255, 255, 255, 0.03);
}

body.dark-mode {
  --bg:           #0e0d0b;
  --fg:           #e8e4dc;
  --muted:        #9a9186;
  --muted2:       #5a5248;
  --gold:         #d4af37;
  --gold-light:   rgba(212, 175, 55, 0.10);
  --border:       rgba(180, 155, 90, 0.16);
  --btn-group-bg: rgba(255, 255, 255, 0.07);
  --card-bg:      rgba(255, 255, 255, 0.03);
}

body.light-mode {
  --bg:           #ffffff;
  --fg:           #111111;
  --muted:        #6b6560;
  --muted2:       #a09890;
  --gold:         #d4af37;
  --gold-light:   rgba(212, 175, 55, 0.10);
  --border:       rgba(180, 155, 90, 0.20);
  --btn-group-bg: rgba(0, 0, 0, 0.05);
  --card-bg:      rgba(0, 0, 0, 0.03);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: var(--font);
  scroll-behavior: smooth;
}
body {
  background:  var(--bg);
  color:       var(--fg);
  font-family: var(--ui-font);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}
a { color: var(--gold); text-decoration: none; }
a:hover { opacity: .75; }

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
header.topbar {
  position:   sticky;
  top:        0;
  z-index:    200;
  height:     var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width:   var(--maxw);
  margin:      0 auto;
  height:      100%;
  padding:     0 var(--pad);
  display:     flex;
  align-items: center;
  gap:         16px;
}

.brand {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  line-height:    1;
}
.brand-title {
  font-family:    var(--ui-font);
  font-size:      17px;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: 0.01em;
}
.brand-byline {
  font-family:    var(--ui-font);
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: 0.01em;
  opacity:        0.85;
}

.topbar-nav {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.tnav-lang-wrap { position: relative; }
.tnav-lang {
  font-family:    var(--ui-font);
  font-size:      13px;
  font-weight:    600;
  color:          var(--muted);
  background:     transparent;
  border:         none;
  padding:        0 4px;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
}
.tnav-lang:hover { color: var(--fg); }

.tnav-group {
  display:       flex;
  align-items:   center;
  background:    var(--btn-group-bg);
  border-radius: 9px;
  padding:       0 4px;
  height:        36px;
  gap:           0;
}

.tnav-btn {
  appearance:  none;
  border:      none;
  background:  transparent;
  min-width:   32px;
  height:      32px;
  padding:     0 11px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font);
  font-size:   13px;
  font-weight: 500;
  color:       var(--muted);
  cursor:      pointer;
  border-radius: 6px;
  text-decoration: none;
  transition:  background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.tnav-btn:hover { background: rgba(128,128,128,.12); color: var(--fg); }

.tnav-sep {
  width:       1px;
  height:      14px;
  background:  var(--border);
  margin:      0 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BARRA FILTRO (Apps / Libros / Arte / Todo)
   ══════════════════════════════════════════ */
.controls-bar {
  position:   sticky;
  top:        var(--topbar-h);
  z-index:    190;
  height:     var(--cbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.cbar-inner {
  max-width:   var(--maxw);
  margin:      0 auto;
  height:      100%;
  padding:     0 var(--pad);
  display:     flex;
  align-items: center;
  gap:         6px;
  overflow-x:  auto;
  scrollbar-width: none;
}
.cbar-inner::-webkit-scrollbar { display: none; }

.cbar-tab {
  appearance:     none;
  border:         none;
  background:     transparent;
  font-family:    var(--ui-font);
  font-size:      12px;
  font-weight:    500;
  color:          var(--muted);
  padding:        4px 10px;
  border-radius:  6px;
  cursor:         pointer;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.cbar-tab:hover  { background: rgba(128,128,128,.08); color: var(--fg); }
.cbar-tab.active { background: var(--gold-light); color: var(--gold); font-weight: 600; }

/* ══════════════════════════════════════════
   CONTENIDO
   ══════════════════════════════════════════ */
.page {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   0 var(--pad) 80px;
}

/* Hero */
.site-hero {
  text-align:    center;
  padding:       3.5rem 0 2.8rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.site-hero-name {
  font-family:    var(--he-font);
  font-size:      35px;
  font-weight:    700;
  color:          var(--gold);
  letter-spacing: 0.01em;
  line-height:    1.1;
  margin-bottom:  0.6rem;
}
.site-hero-sub {
  font-family:    var(--ui-font);
  font-size:      11px;
  color:          var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  1.4rem;
}
.site-hero-bio {
  font-family: var(--ui-font);
  font-size:   15px;
  color:       var(--muted);
  max-width:   480px;
  margin:      0 auto;
  line-height: 1.65;
}

/* Secciones del portfolio */
.portfolio-section {
  margin-bottom: 3rem;
}
.portfolio-section:last-child { margin-bottom: 0; }

.section-heading {
  font-family:    var(--ui-font);
  font-size:      10px;
  font-weight:    600;
  color:          var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom:  1.2rem;
  padding-bottom: 0.6rem;
  border-bottom:  1px solid var(--border);
}

/* Grid de tarjetas */
.cards-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
}

/* Tarjeta */
.card {
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px 20px 16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  transition:    border-color .15s, box-shadow .15s;
  text-decoration: none;
  color:         inherit;
}
.card:hover {
  border-color: var(--gold);
  box-shadow:   0 2px 16px rgba(212,175,55,.10);
  opacity:      1;
}

.card-badge {
  font-family:    var(--ui-font);
  font-size:      11px;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card-title {
  font-family:  var(--ui-font);
  font-size:    16px;
  font-weight:  700;
  color:        var(--fg);
  line-height:  1.2;
}
.card-desc {
  font-family: var(--ui-font);
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.55;
  flex-grow:   1;
}
.card-link {
  font-family:    var(--ui-font);
  font-size:      11px;
  font-weight:    600;
  color:          var(--gold);
  letter-spacing: 0.05em;
  margin-top:     4px;
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
}
.card-link svg {
  opacity: .7;
  transition: opacity .12s, transform .12s;
}
.card:hover .card-link svg {
  opacity: 1;
  transform: translateX(2px);
}

/* Tarjeta "próximamente" */
.card.coming-soon {
  opacity: .55;
  pointer-events: none;
}
.card.coming-soon .card-link { display: none; }
.card-soon-badge {
  font-family:    var(--ui-font);
  font-size:      9px;
  font-weight:    600;
  color:          var(--muted2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border:         1px solid var(--border);
  border-radius:  20px;
  padding:        0.15rem 0.5rem;
  width:          fit-content;
}

/* ── Filtro por categoría ── */
.portfolio-section              { display: block; }
body.filter-apps    .section-libros,
body.filter-apps    .section-arte  { display: none; }
body.filter-libros  .section-apps,
body.filter-libros  .section-arte  { display: none; }
body.filter-arte    .section-apps,
body.filter-arte    .section-libros { display: none; }

/* Footer */
footer {
  border-top:  1px solid var(--border);
  padding:     1.5rem var(--pad);
  text-align:  center;
  font-family: var(--ui-font);
  font-size:   10px;
  color:       var(--muted);
  opacity:     .6;
  line-height: 2;
  max-width:   var(--maxw);
  margin:      0 auto;
}
footer a { color: inherit; }
footer a:hover { color: var(--gold); opacity: 1; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.tnav-btn:focus-visible,
.tnav-lang:focus-visible,
.cbar-tab:focus-visible,
.lang-opt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Language dropdown */
.lang-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    0 4px 16px rgba(0,0,0,.12);
  min-width:     140px;
  z-index:       300;
  overflow:      hidden;
}
.lang-menu.open { display: block; }
.lang-opt {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
  padding:     8px 14px;
  background:  transparent;
  border:      none;
  font-family: var(--ui-font);
  font-size:   13px;
  font-weight: 600;
  color:       var(--muted);
  cursor:      pointer;
  text-align:  left;
  transition:  background .1s, color .1s;
}
.lang-opt span { font-weight: 400; font-size: 12px; color: var(--muted); }
.lang-opt:hover       { background: var(--gold-light); color: var(--fg); }
.lang-opt.active      { color: var(--gold); }
.lang-opt.active span { color: var(--gold); opacity: .7; }

/* Responsive */
@media (max-width: 768px) {
  :root { --pad: 20px; }
  .site-hero-name { font-size: 30px; }
}
@media (max-width: 560px) {
  :root { --pad: 18px; }
  .site-hero-name { font-size: 26px; }
}