* { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Archivo', sans-serif;
    background: radial-gradient(120% 90% at 50% 0%, #16264F 0%, #0B1530 45%, #060A1C 100%);
    color: #ffffff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  .arco {
    pointer-events: none;
    position: fixed;
    left: 50%;
    width: 1400px;
    height: 1400px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .arco.uno { top: 10%; border-color: rgba(255,255,255,0.1); }
  .arco.dos { top: 55%; border-color: rgba(255,255,255,0.05); }

  header {
    position: relative;
    padding: 40px 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  @media (min-width: 768px) { header { padding: 40px 40px 24px; } }

  .visitor-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-bottom: 24px;
    overflow: visible;
  }

  .btn-registro, .btn-espacios, .btn-inicio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid rgba(224,195,107,0.5);
    background: linear-gradient(90deg, #16344F 0%, #1F4A4A 100%);
    color: #ffffff;
    font-family: 'Archivo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-registro:hover, .btn-espacios:hover, .btn-inicio:hover {
    box-shadow: 0 0 0 1px rgba(224,195,107,0.8);
    background: linear-gradient(90deg, #1c3f5f 0%, #275a5a 100%);
  }
  .btn-espacios {
    border-color: rgba(127,217,196,0.4);
    background: rgba(11,21,48,0.72);
    color: #7FD9C4;
    text-decoration: none;
  }
  .btn-inicio {
    margin-right:auto;
    width:36px;
    height:36px;
    padding:0;
    border-color:rgba(224,195,107,0.35);
    background:rgba(11,21,48,0.72);
    color:#ffffff;
    text-decoration:none;
  }
  .btn-inicio svg { width:18px; height:18px; }
  @media (min-width: 768px) {
    .visitor-actions { margin-bottom: 24px; }
  }

  .kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #E0C36B;
  }

  h1.logo {
    font-family: 'DM Serif Display', serif;
    font-size: 44px;
    margin-top: 8px;
    background: linear-gradient(90deg, #FFFFFF 0%, #7FD9C4 55%, #E0C36B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (min-width: 768px) { h1.logo { font-size: 64px; } }

  .subtitulo {
    margin-top: 8px;
    max-width: 560px;
    font-size: 15px;
    color: #9DA8C2;
  }

  .buscador {
    margin-top: 24px;
    position: relative;
    max-width: 480px;
  }
  .buscador svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    stroke: #7FD9C4;
    pointer-events: none;
  }
  .buscador input {
    width: 100%;
    padding: 13px 16px 13px 44px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .buscador input::placeholder { color: #7A85A0; }
  .buscador input:focus {
    border-color: #E0C36B;
    background: rgba(255,255,255,0.09);
  }

  .layout {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  @media (min-width: 1024px) { .layout { flex-direction: row; align-items:flex-start; } }

  aside {
    flex-shrink: 0;
    padding: 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position:sticky;
    top:0;
    z-index:4;
    background:rgba(6,10,28,.96);
    backdrop-filter:blur(12px);
  }
  @media (min-width: 1024px) {
    aside {
      width:256px;
      height:100vh;
      overflow-y:auto;
      border-bottom:none;
      border-right:1px solid rgba(255,255,255,0.1);
    }
  }
  @media (max-width: 1023px) {
    aside {
      padding:12px 16px;
      box-shadow:0 8px 18px rgba(0,0,0,.2);
    }
  }

  nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }
  @media (min-width: 1024px) {
    #nav-categorias { flex-direction: column; overflow-x: visible; }
  }

  .cat-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    text-align: left;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: #9DA8C2;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
  .cat-btn svg { flex-shrink: 0; stroke: #9DA8C2; transition: stroke 0.2s; }
  .cat-btn.activa {
    background: linear-gradient(90deg, #16344F 0%, #1F4A4A 100%);
    box-shadow: 0 0 0 1px rgba(224,195,107,0.5);
    color: #ffffff;
  }
  .cat-btn.activa svg { stroke: #E0C36B; }

  main {
    flex: 1;
    padding: 32px 24px;
    position: relative;
  }
  @media (min-width: 768px) { main { padding: 32px 40px; } }

  h2.titulo-seccion {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    margin-bottom: 24px;
  }
  @media (min-width: 768px) { h2.titulo-seccion { font-size: 32px; } }

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1280px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  article.tarjeta {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(127,217,196,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
  }

  article.tarjeta img.principal {
    width: 100%;
    height: clamp(260px, 42vh, 520px);
    object-fit: cover;
    cursor: zoom-in;
  }

  .tarjeta-contenido {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }

  .ficha {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ficha .id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #E0C36B;
  }
  .ficha .dato {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #7FD9C4;
  }

  .nombre-artista {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    line-height: 1.3;
  }

  .bio {
    font-size: 13px;
    line-height: 1.6;
    color: #9DA8C2;
    flex: 1;
  }

  .interes-accion {
    display: grid;
    gap: 7px;
    margin-top: 8px;
  }
  .btn-interes {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(224,195,107,0.55);
    border-radius: 6px;
    background: linear-gradient(90deg, #16344F 0%, #1F4A4A 100%);
    color: #fff;
    font: 600 13px 'Archivo', sans-serif;
    cursor: pointer;
  }
  .btn-interes:hover { box-shadow: 0 0 0 1px rgba(224,195,107,0.8); }
  .btn-interes:disabled { cursor: default; opacity: .75; }
  .interes-mensaje { min-height: 1em; color: #7FD9C4; font-size: 12px; }

  .obras {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
    max-height: 252px;
    overflow-y: auto;
  }
  .obras img {
    width: 100%;
    height: clamp(72px, 10vh, 112px);
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: zoom-in;
  }

  .obra-lightbox {
    width:100vw;
    height:100vh;
    height:100dvh;
    max-width:none;
    max-height:none;
    margin:0;
    padding:64px 4vw 28px;
    border:0;
    background:rgba(3,8,20,.96);
    color:#fff;
    display:none;
    place-items:center;
    grid-template-rows:minmax(0,1fr) auto;
    gap:12px;
  }
  .obra-lightbox[open] { display:grid; }
  .obra-lightbox::backdrop { background:rgba(3,8,20,.96); }
  .obra-lightbox img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .obra-lightbox p {
    margin:0;
    color:#9DA8C2;
    font-size:13px;
    text-align:center;
  }
  .lightbox-close {
    position:absolute;
    top:16px;
    right:18px;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
  }
  .lightbox-close svg { width:20px; height:20px; }
  @media (max-width:639px) {
    article.tarjeta img.principal { height:clamp(240px, 38vh, 400px); }
    .obra-lightbox { padding:56px 14px 20px; }
  }