@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('fonts/Zalando_Sans_Expanded/ZalandoSansExpanded-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
}

/* ======================
   Reset & base
   ====================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  color: #eaeaea;
  background: #0b0b0f;
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

:root{
  --nav-h: 84px;
  --pad: 24px;
  --hover-start: #ff4040;
  --hover-end: #8a52ff;

  --anim-fast: 180ms;
  --anim-med: 260ms;
}

/* ======================
   Header / Navbar (alineado al index)
   ====================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h);
  background: rgba(11,11,15,.45);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.drawer{ display: none; }

.nav-wrap{
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 32px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:2px; }
.brand__img{ height: 40px; width:auto; display:block; }

.nav{ display: flex; align-items:center; gap: 26px; margin-left:auto; }
.nav a{
  font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600;
  font-size: clamp(.9rem, 1vw, .1rem);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 12px 14px; border-radius: 12px; position: relative; display: inline-block;
}
.nav a::after{
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px;
  background: linear-gradient(90deg, var(--hover-start), var(--hover-end));
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after, .nav a:focus-visible::after{ transform: scaleX(1); }

/* Botón menú con ícono hamburguesa */
.menu-btn{
  /* visibilidad se maneja con media queries existentes */
  margin-left: 20px;
  display: none;

  /* apariencia */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;

  /* ícono */
  background-image: url('images/hamburguesa.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px; /* ajustá a gusto: 20–26px */

  /* no hay texto visible */
  color: transparent;
}

/* hover/focus accesibles */
.menu-btn:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  transition: transform .18s ease, filter .18s ease;
}
.menu-btn:active{
  transform: translateY(0);
  filter: none;
}
.menu-btn:focus-visible{
  outline: 2px solid #3a4150;
  outline-offset: 2px;
}

/* Utilidad opcional si usás <span class="sr-only"> */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


@media (max-width:1200px){ .nav-wrap{ padding: 0 16px; } }

@media (max-width: 900px){
  .nav{ display: none; }
  .menu-btn{ display: inline-flex; }
  .drawer{
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: rgba(11,11,15,.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 16px 20px 24px; display: none;
    flex-direction: column; gap: 6px; border-bottom: 1px solid #222; z-index: 40;
  }
  .drawer a{ padding:14px; border-radius:10px; font-size:1.05rem; }
  .drawer.open{ display: flex; }
}
/* evita fugas del drawer en desktop */
@media (min-width:901px){ .drawer{ display:none !important; } }

@media (max-width:600px){
  :root{ --nav-h:78px; }
  .brand__img{ height:34px; }
}

/* ======================
   Hero
   ====================== */
.hero{
  position: relative; display: grid; place-items: center;
  padding-top: var(--nav-h); overflow: hidden;
}
.hero--short{ min-height: 42vh; }
@media (max-width: 900px){ .hero--short{ min-height: 48vh; } }

canvas#bg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__content{ position: relative; z-index: 1; text-align: center; padding: 28px var(--pad); }
.title{ font-size: clamp(1.8rem, 6vw, 3.2rem); line-height: 1.05; font-weight: 800; margin: 0 0 8px; }
.subtitle{ max-width: 820px; margin: 0 auto; color: #c9ced6; }

.separator{
  height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  margin: 26px auto; width: min(92%, 1100px);
}

/* ======================
   Content (sin ventana blanca)
   ====================== */
.content--transparent{
  background: transparent; color: #eaeaea;
  margin: 0 auto; width: min(1200px, 94%);
  padding: 8px 0 80px;
  box-shadow: none; border-radius: 0;
  text-align: center;
}

/* ======================
   Selector de sellos
   ====================== */
.labels-switcher{ margin: 8px 0 0; }

.labels-row{
  display: flex; justify-content: center; align-items: center;
  flex-wrap: nowrap; gap: 0;
  width: 100%; max-width: 1100px; margin: 0 auto;
  --rail-h: clamp(72px, 12vw, 160px);
}

/* Cada logo ocupa media fila */
.label-btn{
  flex: 0 0 50%;
  height: var(--rail-h);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}

/* Logos base */
.label-btn img{
  height: 100%; width: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.02) brightness(.9);
  opacity: .9;
  transition:
    filter var(--anim-fast) ease,
    opacity var(--anim-fast) ease,
    transform var(--anim-med) ease;
}

/* Compensaciones ópticas (desktop) */
#tab-psynova img{
  transform: scale(.88);
  margin-top: 123px;
}
#tab-auroreum img{
  transform: scale(1.20);
}

/* 💻 Tablet (entre 721px y 1024px) */
@media (max-width: 1024px) and (min-width: 721px) {
  #tab-psynova img {
    margin-top: 95px; /* ajustá libremente, ej: 14–18px */
  }
}

/* 📱 Mobile (hasta 720px) */
@media (max-width: 720px) {
  #tab-psynova img {
    margin-top: 10px; /* ajustá libremente, ej: 8–12px */
  }
}

/* Hover → color + zoom relativo + flotación (desktop) */
#tab-psynova:hover img,
#tab-psynova:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(0.90) translateY(-4px);
}
#tab-auroreum:hover img,
#tab-auroreum:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.22) translateY(-4px);
}

/* Estado seleccionado mantiene el hover */
#tab-psynova[aria-selected="true"] img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(0.96) translateY(-4px);
}
#tab-auroreum[aria-selected="true"] img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.25) translateY(-4px);
}

/* ======================
   Mobile / Tablet adjustments
   ====================== */
@media (max-width: 720px){
  .labels-row{
    flex-wrap: wrap;
    --rail-h: clamp(90px, 24vw, 140px);
    gap: 38px; /* ↑ más espacio entre logos */
  }
  .label-btn{ flex: 1 0 100%; }

  /* tamaños base en mobile */
  #tab-psynova img{
    transform: scale(0.98);
    margin-top: 6px;
  }
  /* Auroreum más grande en mobile */
  #tab-auroreum img{
    transform: scale(1.50);  /* ↑ agrandado */
    margin-top: 6px;
  }

  /* hover/selección sin aumento de tamaño (solo color) */
  #tab-psynova:hover img,
  #tab-psynova:focus-visible img,
  #tab-psynova[aria-selected="true"] img{
    transform: scale(0.98) translateY(0);
    filter: grayscale(0);
    opacity: 1;
  }
  #tab-auroreum:hover img,
  #tab-auroreum:focus-visible img,
  #tab-auroreum[aria-selected="true"] img{
    transform: scale(1.50) translateY(0);
    filter: grayscale(0);
    opacity: 1;
  }
}

/* TABLET (721–1024px): mantener tamaño base (sin zoom al click) */
@media (max-width: 1024px) and (min-width: 721px){
  #tab-psynova:hover img,
  #tab-psynova:focus-visible img,
  #tab-psynova[aria-selected="true"] img{
    transform: scale(.88);  /* sin aumento */
    filter: grayscale(0);
    opacity: 1;
  }
  #tab-auroreum:hover img,
  #tab-auroreum:focus-visible img,
  #tab-auroreum[aria-selected="true"] img{
    transform: scale(1.20); /* sin aumento */
    filter: grayscale(0);
    opacity: 1;
  }
}

/* ======================
   Paneles de artistas
   ====================== */
.labels-panels{ margin-top: 12px; }
.label-panel{
  background: transparent; border: 0;
  margin: 0 auto; width: min(1100px, 100%);
}
.label-panel[hidden]{ display: block; height: 0; padding: 0; margin: 0; overflow: hidden; }
.panel-inner{ padding: 6px 6px 0; }

/* ======================
   Grid de artistas / Tarjetas
   ====================== */
.artists-grid{
  display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px; justify-items: center;
}
@media (max-width: 980px){ .artists-grid{ grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
@media (max-width: 600px){ .artists-grid{ grid-template-columns: 1fr; } }

.artist-card{
  display: grid; grid-template-rows: auto 1fr;
  background: #14161f;
  border: 1px solid #262a36;
  border-radius: 14px; overflow: hidden;
  transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, border-color var(--anim-fast) ease;
  width: 100%; max-width: 320px; text-align: center; color: #eaeaea;
}
.artist-card:hover, .artist-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-color: #3a3f52;
}

/* Foto más alta (menos recorte vertical) */
.artist-photo{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.artist-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: filter var(--anim-fast) ease, transform var(--anim-fast) ease;
}
/* Más altura en mobile */
@media (max-width: 600px){
  .artist-photo{ aspect-ratio: 3 / 4; }
}

.artist-card:hover .artist-photo img,
.artist-card:focus-visible .artist-photo img,
.artist-card.selected .artist-photo img{
  filter: grayscale(0); transform: scale(1.02);
}
.artist-meta{ padding: 12px 12px 14px; }
.artist-name{ margin: 0 0 2px; font-weight: 800; font-size: 1.05rem; }
.artist-genre{ margin: 0; color: #b8bfd1; font-weight: 600; letter-spacing: .01em; }

/* ======================
   Misc
   ====================== */
section{ scroll-margin-top: calc(var(--nav-h) + 16px); }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  .no-mr{ display: none; }
  html{ scroll-behavior: auto; }
  .nav a::after{ transition: none; transform: none; }
  .label-btn, .artist-card, .label-btn img{ transition: none; }
}

/* ===========================================================
   📱 Tablet + Mobile (≤1024px): sin “zoom” al click en los logos
   (mantener animación de color)
   =========================================================== */
@media (max-width: 1024px){
  /* sin zoom en ambos logos (tablet y mobile) ya aplicado arriba */
}

/* ===========================================================
   🎨 Tablet + Mobile (≤1024px): artistas SIEMPRE a color
   =========================================================== */
@media (max-width: 1024px){
  .artist-photo img{
    filter: grayscale(0) contrast(1.05) brightness(1);
  }
  .artist-card:hover .artist-photo img,
  .artist-card:focus-visible .artist-photo img{
    transform: none;
  }
}