/* =============================================================
   ALLEY PLACEMENTS — styles.css
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Typography
   5. Components
   6. Sections
   7. Effects
   8. Responsive
   9. Reduced motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --mesh-y { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
@property --chrome-pos { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #0a0a0a;
  --bg-2: #131313;
  --bg-3: #1c1c1c;
  --bg-4: #232323;

  --ink: #f3f3f1;
  --ink-soft: rgba(243, 243, 241, 0.74);
  --ink-mute: rgba(243, 243, 241, 0.46);
  --ink-faint: rgba(243, 243, 241, 0.14);

  --silver-hi: #fbfbfc;
  --silver: #cdd0d6;
  --silver-mid: #9a9da5;
  --silver-dim: #6c6f77;

  --accent: #c3c6cd;
  --line: rgba(243, 243, 241, 0.13);
  --line-strong: rgba(243, 243, 241, 0.24);

  --pulse: #e7e9ee;

  --display: "Anton", "Arial Narrow", sans-serif;
  --display-lettering: "Lostar", "Anton", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 76px;
  --container: 1360px;

  color-scheme: dark;
}

/* --- Custom lettering fonts (probando) --- */
@font-face {
  font-family: "Lostar";
  src: url("assets/fonts/Lostar.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--silver); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--silver); color: var(--bg);
  border-radius: 4px; font-weight: 700; font-size: .85rem;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 720px) { .container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container { padding-inline: 2.5rem; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--silver-mid);
  display: inline-flex; align-items: center; gap: .55rem;
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--silver-hi);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}

.tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--silver);
  padding: .32rem .65rem;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
}
.tag-ghost {
  color: var(--silver);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.chrome-text {
  background: linear-gradient(180deg,
    var(--silver-hi) 0%, var(--silver) 22%, var(--silver-dim) 48%,
    var(--silver) 74%, var(--silver-hi) 100%);
  background-size: 100% 220%;
  background-position: 0 var(--chrome-pos, 0%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));
  animation: chromeShift 9s ease-in-out infinite;
}
@keyframes chromeShift {
  0%, 100% { --chrome-pos: 0%; }
  50% { --chrome-pos: 100%; }
}

.chrome-frame { position: relative; isolation: isolate; }
.chrome-frame::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle),
    var(--silver-dim), var(--silver-hi) 20%, var(--silver-dim) 40%,
    var(--silver-mid) 60%, var(--silver-hi) 80%, var(--silver-dim));
  animation: rotateAngle 7s linear infinite;
}
@keyframes rotateAngle { to { --angle: 360deg; } }

.divider { border: 0; border-top: 1px solid var(--line); }

/* =============================================================
   4. Typography
   ============================================================= */
h1, .h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: .92; }
h2, .h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(2rem, 5vw, 3.6rem); line-height: .96; }
h3, .h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1; }
h4, .h4 { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 46ch; line-height: 1.55; }
.eyebrow-line { display: flex; align-items: center; gap: .9rem; color: var(--ink-mute); font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* --- Lettering de prueba (Lostar) --- */
.lettering-test { font-family: var(--display-lettering); text-transform: none; letter-spacing: 0; }

/* --- Brillos de diamante alrededor de un título --- */
.sparkle-wrap { position: relative; display: block; width: fit-content; }
.sparkle {
  position: absolute; fill: var(--silver-hi); pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(255,255,255,.4));
  opacity: 0;
  animation: sparkleTwinkle 3.2s ease-in-out infinite;
}
.sparkle-a { top: -3%;   left: -4%;  width: 28px; height: 28px; animation-delay: .1s; }
.sparkle-b { top: 12%;   right: 0%;  width: 16px; height: 16px; animation-delay: 1.3s; }
.sparkle-c { top: 44%;   left: -6%;  width: 20px; height: 20px; animation-delay: 2.2s; }
.sparkle-d { top: 60%;   right: 4%;  width: 32px; height: 32px; animation-delay: .7s; }
.sparkle-e { bottom: 4%; left: 20%;  width: 18px; height: 18px; animation-delay: 1.9s; }
.sparkle-f { top: 78%;   right: 26%; width: 14px; height: 14px; animation-delay: 2.7s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(12deg); }
}

/* --- Escena 3D de fondo (placeholder, rota con el scroll) --- */
.scene-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
main, .footer { position: relative; z-index: 1; }

/* =============================================================
   5. Components
   ============================================================= */

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-logo { font-family: var(--display); font-size: 1.3rem; letter-spacing: .01em; text-transform: uppercase; }
.nav-logo span { color: var(--silver-mid); }
.nav-links { display: none; align-items: center; gap: 2.1rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: .3rem 0; color: var(--ink-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--silver-hi);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  display: none;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 3px;
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out);
}
@media (min-width: 720px) { .nav-cta { display: inline-block; } }
.nav-cta:hover { background: var(--silver); color: var(--bg); border-color: var(--silver); }

.nav-toggle {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); border-radius: 3px;
}
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle-bars { position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), top .35s var(--ease-out);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; }
.nav-toggle-bars span:nth-child(3) { top: 100%; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 480;
  background: rgba(8,8,8,.98);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
.nav-mobile-list { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nav-mobile-list a { font-family: var(--display); font-size: 2.4rem; text-transform: uppercase; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 1.7rem; border-radius: 3px; border: 1px solid transparent;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn-primary { background: linear-gradient(180deg, var(--silver-hi), var(--silver-mid)); color: var(--bg); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(255,255,255,.25); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--silver); background: rgba(255,255,255,.04); transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

/* --- Cards --- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

/* --- Footer --- */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-logo { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; }
.footer-tagline { color: var(--ink-mute); max-width: 32ch; margin-top: .8rem; font-size: .92rem; }
.footer-col-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-mid); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { color: var(--ink-soft); font-size: .92rem; transition: color .3s; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--ink-mute); font-size: .8rem; font-family: var(--mono); }
.footer-bottom a { color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--ink); }

/* --- Page header (sub-pages) --- */
.page-head { padding-block: calc(var(--nav-h) + 4rem) 3rem; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-head-inner { position: relative; z-index: 2; }
.page-head .h1 { margin-top: .8rem; }
.page-head .lede { margin-top: 1rem; }

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Hero (home) --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--bg); }
.hero-collage { position: absolute; inset: -4% -2%; display: flex; flex-direction: column; gap: 2px; }
.hero-collage-row { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-wrap: nowrap; }
.hero-collage-track { display: inline-flex; height: 100%; will-change: transform; }
.hero-collage-track img {
  width: auto; height: 100%; max-width: none; flex-shrink: 0;
  object-fit: cover; aspect-ratio: 3/4;
  filter: grayscale(.75) contrast(1.12) brightness(.48) saturate(.6);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 45%, var(--bg) 96%),
              linear-gradient(90deg, rgba(10,10,10,.75) 0%, transparent 55%);
}
.hero-mesh {
  position: absolute; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at var(--mesh-x) var(--mesh-y), rgba(255,255,255,.14), transparent 65%),
    conic-gradient(from var(--mesh-angle), rgba(255,255,255,.05), transparent 30%, rgba(255,255,255,.07) 55%, transparent 80%);
  filter: blur(90px) saturate(120%);
  opacity: .8;
  animation: meshShift 24s linear infinite;
  mix-blend-mode: screen;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg;   --mesh-x: 25%; --mesh-y: 35%; }
  50%  { --mesh-angle: 180deg; --mesh-x: 72%; --mesh-y: 60%; }
  100% { --mesh-angle: 360deg; --mesh-x: 25%; --mesh-y: 35%; }
}
.hero-content { position: relative; z-index: 2; padding-block: 4rem 5rem; width: 100%; }
.hero-eyebrow { margin-bottom: 1.2rem; }
.hero-title { max-width: 15ch; }
.hero-sub { margin-top: 1.4rem; }
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-scroll-cue {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
.hero-scroll-cue::after {
  content: ""; width: 1px; height: 30px; background: linear-gradient(var(--ink-mute), transparent);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --- Quick nav (justo bajo el hero, salto directo a cada apartado) --- */
.quicknav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.4rem; }
.quicknav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }
.quicknav-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); flex-shrink: 0; }
.quicknav-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.6rem; }
.quicknav-link { position: relative; padding: .3rem 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.quicknav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--silver-hi);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.quicknav-link:hover { color: var(--ink); }
.quicknav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.quicknav-link--primary {
  font-family: var(--display); font-size: 1.3rem; letter-spacing: 0; text-transform: uppercase; padding: 0;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver-mid));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.quicknav-link--primary::after { height: 2px; bottom: -5px; background: var(--silver-hi); }

/* --- Portal stream: Revista / Artistas / Productores integrados en un mismo flujo --- */
.portal-stream-intro { padding-block: 3rem 0; }
.portal-stream { display: flex; flex-direction: column; margin-top: 1.6rem; }
.portal-panel {
  position: relative; display: flex; align-items: flex-end;
  min-height: 78vh; min-height: 78svh;
  isolation: isolate; overflow: hidden;
}
.portal-panel-media { position: absolute; inset: 0; z-index: -2; }
.portal-panel-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.88) contrast(1.15) brightness(.5);
  transition: transform 1.4s var(--ease-soft), filter .7s var(--ease-out);
}
.portal-panel:hover .portal-panel-media img { transform: scale(1.07); filter: grayscale(.4) contrast(1.18) brightness(.62); }

/* --- Filmstrip de fotos reales (home, paneles Artistas/Productores) --- */
.portal-photo-marquee { position: absolute; inset: 0; overflow: hidden; display: flex; flex-wrap: nowrap; }
.portal-panel-media .portal-photo-track {
  display: inline-flex; height: 100%; will-change: transform;
}
.portal-panel-media .portal-photo-track img {
  width: auto; height: 100%; max-width: none; flex-shrink: 0;
  object-fit: cover; aspect-ratio: 3/5;
  filter: grayscale(.88) contrast(1.15) brightness(.5);
  transition: filter .7s var(--ease-out);
}
.portal-panel:hover .portal-photo-track img { filter: grayscale(.4) contrast(1.18) brightness(.62); }
.portal-photo-track img[src*="artist-yung-denzo"],
.hero-collage-track img[src*="artist-yung-denzo"] { object-position: 22% 35%; }
.portal-panel-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.6) 42%, rgba(10,10,10,.92) 68%, var(--bg) 92%),
              linear-gradient(90deg, rgba(10,10,10,.6) 0%, transparent 60%);
}
/* --- Collage de la card Magazine (portada) — una pila de fotos reales (Dirty Suc,
   VAR0, Adan) centrada arriba, con recortes de prensa (frase real de bio) flotando
   alrededor. Todo el conjunto vive dentro del 40% superior del panel — el 60%
   inferior es donde arranca .portal-panel-content (título "MAGAZINE") — para que
   nunca compita ni se cruce con el texto legible. z-index -2 igual que
   .portal-panel-media, así respeta el overlay/gradiente que oscurece hacia abajo. --- */
.press-collage {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.press-photo-stack {
  position: absolute; top: 13vh; left: 50%; transform: translateX(-50%);
  width: clamp(126px, 38vw, 640px); aspect-ratio: 1.55/1;
}
.stack-photo {
  position: absolute; width: 46%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 5px; box-shadow: 0 16px 30px -10px rgba(0,0,0,.75);
  filter: grayscale(.7) contrast(1.12) brightness(1);
  outline: 1px solid rgba(255,255,255,.08);
}
.stack-photo.sp1 { top: 4%; left: 0; z-index: 1; transform: rotate(-8deg); }
.stack-photo.sp2 { top: 0; left: 27%; z-index: 2; transform: rotate(4deg); }
.stack-photo.sp3 { top: 7%; left: 54%; z-index: 3; transform: rotate(-3deg); }

.press-quote {
  position: absolute; width: clamp(84px, 13vw, 240px);
  background: #efefe9; border-radius: 3px; padding: .4rem .6rem;
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.6);
  transform: rotate(var(--q-rot, -2deg));
}
.press-quote .clip-kicker {
  font-family: var(--mono); font-size: clamp(.4rem, .9vw, .58rem); letter-spacing: .07em;
  text-transform: uppercase; color: #6b6b66;
}
.press-quote .clip-headline {
  margin-top: .15rem; font-family: var(--sans); font-style: italic; font-size: clamp(.56rem, 1.2vw, .82rem);
  line-height: 1.2; color: #171717;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.press-quote.qa { top: 2vh; left: 3%; --q-rot: -4deg; }
.press-quote.qb { top: 4vh; right: 3%; --q-rot: 3deg; }
.press-quote.qc { display: none; }

@media (min-width: 560px) {
  .press-photo-stack { top: 8vh; }
  .press-quote.qc {
    display: block; top: 30vh; left: 4%; --q-rot: 2deg;
  }
  .press-quote.qa { top: 3vh; }
  .press-quote.qb { top: 5.5vh; }
}
@media (min-width: 900px) {
  .press-photo-stack { top: 6vh; }
  .press-quote.qc { top: 27vh; left: 6%; }
  .press-quote.qa { top: 4vh; left: 5%; }
  .press-quote.qb { top: 7vh; right: 5%; }
}
.portal-panel-content { position: relative; z-index: 2; padding-block: 3rem 4.5rem; width: 100%; }
.portal-num { font-family: var(--mono); font-size: .8rem; color: var(--ink-mute); }
.portal-label { font-size: clamp(3.2rem, 10vw, 7.5rem); margin-top: .5rem; }
.portal-desc { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.02rem; max-width: 40ch; }
.portal-arrow {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
}
.portal-arrow svg { width: 15px; height: 15px; transition: transform .4s var(--ease-out); }
.portal-panel:hover .portal-arrow svg { transform: translateX(5px); }
@media (min-width: 860px) {
  .portal-panel { min-height: 88vh; min-height: 88svh; }
  .portal-panel-content { max-width: 58%; }
  #panel-revista { min-height: 100vh; min-height: 100svh; }
}

/* --- Filtros (directorio de artistas/productores): ciudad + orden, tras un desplegable discreto --- */
.filters-toggle { margin-top: 1.4rem; }
.filters-toggle-summary {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); cursor: pointer; list-style: none; user-select: none;
  padding: .3rem 0; transition: color .25s var(--ease-out);
}
.filters-toggle-summary::-webkit-details-marker { display: none; }
.filters-toggle-summary::marker { content: ""; }
.filters-toggle-summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.filters-toggle:hover .filters-toggle-summary, .filters-toggle-summary:focus-visible { color: var(--ink); }
.filters-toggle[open] .filters-toggle-summary::after { margin-top: 3px; transform: rotate(-135deg); }
.directory-filters { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; }
.directory-filters .city-filter { margin-top: 0; }
.city-filter { margin-top: 1.4rem; max-width: 280px; }
.city-filter-label {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .5rem;
}
.city-filter-select {
  width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .9rem 2.6rem .9rem 1.1rem; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9da5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px;
  color: var(--ink); cursor: pointer; transition: border-color .25s var(--ease-out);
}
.city-filter-select:hover, .city-filter-select:focus { border-color: var(--silver); outline: none; }
.city-filter-select option { background: var(--bg-2); color: var(--ink); }
.featured-panel.is-city-hidden { display: none; }

/* --- Textura de fondo (directorio de artistas/productores): rompe el negro plano con vidrio agrietado + grano, muy sutil ---
   Vive en una capa fixed independiente, hermana del contenido (NUNCA ancestro de las fichas): el motor de render de este
   entorno deja que el fondo de un ancestro se cuele a través de las fichas (que usan mask + isolation + filter en capas
   negativas), así que la única forma fiable de que "no toque las fichas" es que ni siquiera sea su antepasado en el DOM. */
.directory-texture {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(124deg, transparent 31%, rgba(255,255,255,.07) 31.4%, rgba(255,255,255,.07) 31.6%, transparent 32%),
    linear-gradient(71deg, transparent 52%, rgba(255,255,255,.055) 52.3%, rgba(255,255,255,.055) 52.5%, transparent 53%),
    linear-gradient(158deg, transparent 12%, rgba(255,255,255,.045) 12.3%, transparent 12.7%),
    linear-gradient(94deg, transparent 74%, rgba(255,255,255,.045) 74.4%, rgba(255,255,255,.045) 74.6%, transparent 75%),
    linear-gradient(38deg, transparent 88%, rgba(255,255,255,.04) 88.3%, transparent 88.7%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* --- Featured stream (perfiles destacados en zigzag, estilo home) --- */
.featured-stream { display: flex; flex-direction: column; gap: 2rem; margin-block: .5rem 3.5rem; }
.featured-panel {
  position: relative; display: flex; align-items: flex-end;
  width: 100%; min-height: 56vh; min-height: 56svh;
  isolation: isolate; overflow: hidden; border-radius: 8px;
}
.featured-panel-media { position: absolute; inset: 0; z-index: -2; }
.featured-panel-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) contrast(1.1) brightness(.5);
  transition: transform 1.4s var(--ease-soft), filter .7s var(--ease-out);
}
.featured-panel:hover .featured-panel-media img { transform: scale(1.06); filter: grayscale(.15) contrast(1.14) brightness(.62); }
.featured-panel-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.5) 60%, var(--bg) 100%);
}
.featured-panel-content { position: relative; z-index: 2; padding: 2.2rem 2rem 2.6rem; width: 100%; }
.featured-panel-title { font-size: clamp(2.4rem, 8vw, 4.2rem); margin-top: .5rem; }
.featured-panel-meta { margin-top: .7rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Perfil destacado (artistas de más visibilidad): marco cromado animado + etiqueta plateada brillante,
   mismo lenguaje visual que .chrome-text/.chrome-frame (usados en el título de portada). El anillo se
   dibuja en un wrapper aparte con padding — nunca directamente sobre .featured-panel, que tiene su propio
   overflow:hidden y se comería el borde si estuviera pegado al mismo elemento. --- */
/* NOTA: un anillo cromado en un wrapper ancestro (::before con conic-gradient) se cuela dentro
   de .featured-panel pese al z-index correcto — mismo problema de fondos-en-ancestro que ya
   documentamos con .directory-texture. El outline, al ir directamente sobre el propio elemento
   con overflow:hidden, no sufre ese sangrado — por eso el "marco" usa outline + shimmer de color
   en vez de un conic-gradient real. */
.featured-panel.is-featured {
  outline: 2px solid var(--silver-hi);
  outline-offset: 5px;
  animation: featuredShine 2.6s ease-in-out infinite;
}
@keyframes featuredShine {
  0%, 100% {
    outline-color: var(--silver-dim);
    box-shadow: 0 0 50px 6px rgba(230,232,238,.16), 0 0 110px 24px rgba(230,232,238,.08);
  }
  50% {
    outline-color: var(--silver-hi);
    box-shadow: 0 0 70px 10px rgba(230,232,238,.3), 0 0 150px 36px rgba(230,232,238,.14);
  }
}
.featured-panel-star {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 999px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.featured-panel-star, .profile-featured-badge {
  background: linear-gradient(180deg,
    var(--silver-hi) 0%, var(--silver) 22%, var(--silver-dim) 48%,
    var(--silver) 74%, var(--silver-hi) 100%) !important;
  background-size: 100% 220% !important;
  background-position: 0 var(--chrome-pos, 0%) !important;
  color: var(--bg) !important;
  animation: chromeShift 9s ease-in-out infinite;
}
.featured-star-mark { font-size: 1.3em; line-height: 1; }
@media (min-width: 720px) {
  .featured-stream { gap: 2.5rem; margin-block: 1rem 4rem; }
  .featured-panel {
    width: 78%; min-height: 66vh; min-height: 66svh; border-radius: 10px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 86%, transparent 100%);
  }
  .featured-panel.align-left { margin-right: auto; }
  .featured-panel.align-right {
    margin-left: auto;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 86%, transparent 100%);
  }
  .featured-panel-content { padding: 3rem 3rem 3.6rem; max-width: 74%; }
}

/* --- Legend panel (el perfil de mayor peso del directorio): ocupa todo el ancho,
   de izquierda a derecha, sin la máscara de desvanecido lateral ni el offset de
   align-left/align-right — se declara después de esas reglas para ganar por orden
   de cascada aunque el JS de zigzag le siga añadiendo align-left/align-right. --- */
.featured-panel.is-legend { min-height: 64vh; min-height: 64svh; }
.featured-panel.is-legend .featured-panel-title { font-size: clamp(2.8rem, 10vw, 5.6rem); }
.featured-panel.is-legend .featured-panel-star { font-size: .76rem; padding: .55rem 1.05rem; }
@media (min-width: 720px) {
  .featured-panel.is-legend {
    width: 100% !important; margin-inline: 0 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    min-height: 80vh; min-height: 80svh;
  }
  .featured-panel.is-legend .featured-panel-content { max-width: 56%; }
}

/* --- Prensa (exclusivo de perfiles con cobertura editorial real) --- */
.press-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 640px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
.press-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); text-decoration: none;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.press-card:hover { border-color: var(--silver-dim); transform: translateY(-3px); }
.press-outlet { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver-mid); }
.press-headline { font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--ink); }
.press-excerpt { font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.press-link { margin-top: auto; padding-top: .3rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink-mute); display: inline-flex; align-items: center; gap: .3rem; }
.press-card:hover .press-link { color: var(--silver-hi); }

/* --- Logros / hitos de carrera (tira de highlights, perfiles de gran trayectoria) --- */
.achievement-list { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.2rem; }
.achievement-row { display: flex; gap: 1rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.achievement-row:last-child { border-bottom: none; padding-bottom: 0; }
.achievement-year { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--silver-mid); flex-shrink: 0; min-width: 3.6rem; }
.achievement-text { font-size: .96rem; line-height: 1.55; color: var(--ink-soft); }

/* --- Ticker / marquee --- */
.ticker { display: flex; flex-wrap: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1rem; overflow: hidden; position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker-track { display: inline-flex; gap: 3rem; white-space: nowrap; will-change: transform; }
.ticker-track span { font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ticker-track span.sep { color: var(--silver-dim); }

/* --- News marquee (tira compacta, scroll infinito) --- */
.news-marquee { display: flex; flex-wrap: nowrap; overflow: hidden; position: relative; margin-top: .5rem; }
.news-marquee::before, .news-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.news-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.news-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.news-marquee-track { display: inline-flex; gap: .75rem; white-space: nowrap; will-change: transform; padding-inline: 1.25rem; }
@media (min-width: 720px) { .news-marquee-track { padding-inline: 2rem; } }
.news-mini-card {
  display: inline-flex; flex-direction: column; width: 168px; flex-shrink: 0; white-space: normal;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg-2);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.news-mini-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.news-mini-img { aspect-ratio: 4/3; overflow: hidden; }
.news-mini-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.1) brightness(.68); transition: transform .8s var(--ease-soft), filter .4s; }
.news-mini-card:hover .news-mini-img img { transform: scale(1.08); filter: grayscale(.1) contrast(1.12) brightness(.8); }
.news-mini-body { padding: .6rem .7rem .8rem; }
.news-mini-tag { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver-mid); }
.news-mini-title { margin-top: .3rem; font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* --- Stats --- */
.stats { padding-block: 4.5rem; }
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
@media (min-width: 720px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat-value { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); }
.stat-label { margin-top: .4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* --- Section head (generic) --- */
.section { padding-block: 5rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.section-head .h2 { margin-top: .6rem; }

/* --- News (revista feed) --- */
.news-grid { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: flex; flex-direction: column; }
.news-card-img { aspect-ratio: 16/10; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) contrast(1.08) brightness(.75); transition: transform .9s var(--ease-soft), filter .5s; }
.news-card:hover .news-card-img img { transform: scale(1.06); filter: grayscale(.1) contrast(1.1) brightness(.85); }
.news-card-body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.news-card-meta { display: flex; align-items: center; gap: .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.news-card-title { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
.news-card-excerpt { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.news-card-read { margin-top: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }

.news-feature { display: grid; gap: 1.5rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 3rem; }
@media (min-width: 860px) { .news-feature { grid-template-columns: 1.1fr 1fr; gap: 0; } }
.news-feature-img { aspect-ratio: 16/10; }
@media (min-width: 860px) { .news-feature-img { aspect-ratio: auto; height: 100%; } }
.news-feature-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.1) brightness(.7); }
.news-feature-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }

/* --- Article page --- */
.article-head { padding-block: calc(var(--nav-h) + 3rem) 2rem; }
.article-meta { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.article-image { aspect-ratio: 21/9; overflow: hidden; border-radius: 6px; margin-block: 2rem; }
.article-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.08) brightness(.78); }
.article-body { max-width: 66ch; font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); }
.article-body em { color: var(--ink); font-style: italic; }
.article-related { margin-top: 3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --- Directory (artistas / productores listing) --- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.filter-pill {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--ink-soft);
}
.filter-pill.is-active { background: var(--silver); color: var(--bg); border-color: var(--silver); }

.directory-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .directory-grid { grid-template-columns: repeat(4, 1fr); } }

.profile-card { display: block; position: relative; }
.profile-card-img { aspect-ratio: 3/4; overflow: hidden; border-radius: 6px; position: relative; isolation: isolate; }
.profile-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.1) brightness(.68); transition: transform .9s var(--ease-soft), filter .5s; }
.profile-card-img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #1c1c1c 0%, #0a0a0a 65%);
}
.profile-card-img-placeholder span { font-family: var(--display); font-size: 2.6rem; text-transform: uppercase; opacity: .5; }
.profile-card:hover .profile-card-img img { transform: scale(1.08); filter: grayscale(.15) contrast(1.12) brightness(.8); }
.profile-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.92) 100%); }
.profile-card-role { position: absolute; top: .9rem; left: .9rem; z-index: 2; }
.profile-card-info { position: absolute; left: .9rem; right: .9rem; bottom: .9rem; z-index: 2; }
.profile-card-name { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; }
.profile-card-meta { margin-top: .3rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--ink-soft); display: flex; flex-direction: column; gap: .15rem; }
.profile-card-looking { margin-top: 1rem; font-size: .82rem; color: var(--ink-mute); line-height: 1.4; }

/* --- Profile detail page --- */
.profile-hero { padding-block: calc(var(--nav-h) + 2.5rem) 3rem; }
.profile-hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .profile-hero-grid { grid-template-columns: clamp(360px, 34vw, 480px) 1fr; align-items: end; } }
.profile-photo-frame { position: relative; isolation: isolate; }
.profile-photo-frame::before {
  content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.17), transparent 62%);
  filter: blur(38px);
}

/* --- Perfil destacado (artistas de más visibilidad): halo plateado + etiqueta cromada en su propia ficha --- */
.profile-photo-frame.is-featured::before {
  background: radial-gradient(ellipse at 50% 42%, rgba(230,232,238,.45), transparent 62%);
}
.profile-featured-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: .7rem; margin-right: .6rem;
}
.profile-photo { aspect-ratio: 3/4; position: relative; }
/* Máscara rectangular (no ovalada): un degradado lineal por eje,
   combinados con mask-composite para que el resultado sea la
   INTERSECCIÓN de los dos — mantiene la silueta cuadrada de la caja
   pero con los cuatro bordes (y esquinas) difuminados hacia fuera,
   fundiéndose con el fondo sin dejar nunca un filo recto visible. */
.profile-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.1) brightness(.75);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-composite: intersect;
}

/* --- Placeholder de foto (perfil aún sin fotos reales): mismo marco/máscara, iniciales en vez de imagen --- */
.profile-photo-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #1c1c1c 0%, #0a0a0a 65%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-composite: intersect;
}
.profile-photo-placeholder span {
  font-family: var(--display); font-size: clamp(3.4rem, 9vw, 5.6rem); text-transform: uppercase;
}

/* --- Foto de galería suelta (p.ej. "Detrás de cámaras"), mismo tratamiento integrado --- */
.gallery-photo { aspect-ratio: 3/4; position: relative; }
.gallery-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.1) brightness(.8);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* --- Mini galería (2 fotos visibles, abre lightbox con la galería completa) --- */
.mini-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.mini-gallery-trigger {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .3s var(--ease-out);
}
.mini-gallery-trigger:hover { transform: translateY(-3px); }
.mini-gallery-more {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: rgba(10,10,10,.45); opacity: 0; transition: opacity .3s var(--ease-out);
}
.mini-gallery-trigger:hover .mini-gallery-more, .mini-gallery-trigger:focus-visible .mini-gallery-more { opacity: 1; }

.gallery-modal {
  border: 0; padding: 0; max-width: min(92vw, 1100px); max-height: 88vh; width: 100%;
  background: var(--bg-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
}
.gallery-modal::backdrop { background: rgba(6,6,6,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gallery-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,10,.6); border: 1px solid var(--line-strong); color: var(--ink);
  display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; transition: background .3s, border-color .3s;
}
.gallery-modal-close:hover { background: var(--silver); color: var(--bg); border-color: var(--silver); }
.gallery-modal-track {
  display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden; padding: 1rem;
  scroll-snap-type: x mandatory; max-height: 88vh;
}
.gallery-modal-track img {
  flex: 0 0 auto; height: 78vh; max-height: 700px; width: auto; max-width: 88vw; object-fit: contain;
  border-radius: 6px; scroll-snap-align: center;
  filter: grayscale(.35) contrast(1.08) brightness(.88);
}

.profile-role-tag { margin-bottom: 1rem; }
.profile-name { line-height: .9; font-size: clamp(2.8rem, 8.6vw, 7.4rem); }
.profile-meta-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 2.2rem; }
.profile-meta-item { display: flex; flex-direction: column; gap: .4rem; }
.profile-meta-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.profile-meta-value { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; }
.profile-looking-box { margin-top: 1.9rem; padding: 1.3rem 1.6rem; border: 1px solid var(--line-strong); border-radius: 6px; display: flex; gap: .9rem; align-items: flex-start; max-width: 640px; }

.profile-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-block: 2.5rem; border-block: 1px solid var(--line); margin-block: 1rem; }
.profile-stats-row .stat-value { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.profile-grid-2 { display: grid; gap: 3rem; }
@media (min-width: 960px) { .profile-grid-2 { grid-template-columns: 1.3fr 1fr; } }

.collab-list { display: flex; flex-direction: column; }
.collab-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.collab-row:first-child { padding-top: 0; }
.collab-name { font-family: var(--sans); font-weight: 700; }
.collab-name a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out); }
.collab-name a:hover, .collab-name a:focus-visible { color: var(--silver); text-decoration-color: currentColor; }
.collab-project { color: var(--ink-mute); font-size: .84rem; margin-top: .2rem; }
.collab-year { font-family: var(--mono); font-size: .78rem; color: var(--silver-mid); }

.track-list { display: flex; flex-direction: column; gap: .6rem; }
.track-row {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2);
  transition: border-color .3s, background .3s;
}
.track-row:hover { border-color: var(--line-strong); background: var(--bg-3); }
.track-cover { flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-play {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; transition: background .3s, border-color .3s;
}
.track-row:hover .track-play, .track-row.is-playing .track-play { background: var(--silver); border-color: var(--silver); }
.track-play svg { width: 12px; height: 12px; fill: var(--ink); transition: fill .3s; }
.track-row:hover .track-play svg, .track-row.is-playing .track-play svg { fill: var(--bg); }
.track-info { flex: 1; min-width: 0; }
.track-title { font-weight: 600; font-size: .92rem; }
.track-with { font-size: .76rem; color: var(--ink-mute); margin-top: .1rem; }
.track-wave { flex-shrink: 0; display: none; align-items: flex-end; gap: 2px; height: 20px; }
@media (min-width: 540px) { .track-wave { display: flex; } }
.track-wave span { width: 2px; background: var(--line-strong); border-radius: 1px; }
.track-row:hover .track-wave span, .track-row.is-playing .track-wave span { background: var(--silver-mid); }
.track-row.is-playing .track-wave span { animation: waveBounce 1s ease-in-out infinite; }
.track-duration { flex-shrink: 0; font-family: var(--mono); font-size: .76rem; color: var(--ink-mute); }
@keyframes waveBounce { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.track-note { margin-top: 1rem; font-size: .78rem; color: var(--ink-mute); font-style: italic; }

.profile-contact { margin-top: 2.5rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }

/* --- Redes (Spotify / Instagram), apiladas, iconos monocromo --- */
.profile-socials { margin-top: 1.9rem; display: flex; flex-direction: column; gap: .9rem; }
.profile-social-link {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .92rem; letter-spacing: .02em;
  color: var(--ink-soft); text-decoration: none; width: fit-content;
  transition: color .2s var(--ease-out);
}
a.profile-social-link:hover, a.profile-social-link:focus-visible { color: var(--ink); }
.profile-social-link svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; opacity: .85; }
.profile-social-link span { opacity: .55; }

/* --- Join / form (unete.html) --- */
.join-hero { position: relative; padding-block: calc(var(--nav-h) + 4rem) 3.5rem; overflow: hidden; }
.join-hero-bg { position: absolute; inset: 0; z-index: -1; }
.join-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(1.15) brightness(.32); }
.join-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.5), var(--bg) 96%); }

.form-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .form-grid { grid-template-columns: 1fr 1.2fr; } }
.form-side-list { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 1.5rem; }
.form-side-item { display: flex; gap: .9rem; align-items: flex-start; }
.form-side-num { font-family: var(--mono); font-size: .8rem; color: var(--silver-mid); }

.field { position: relative; margin-bottom: 1.4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.5rem 1rem .6rem; border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--bg-2); color: var(--ink); transition: border-color .3s;
}
.field select { appearance: none; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--silver); outline: none; }
.field label {
  position: absolute; left: 1rem; top: 1.05rem; pointer-events: none; transition: all .25s var(--ease-out);
  color: var(--ink-mute); font-size: .95rem;
}
.field select ~ label,
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: .45rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver-mid);
}
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.cta-form { position: relative; }
.cta-form.is-sent { opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .5s, transform .5s; }
.form-submit { position: relative; width: 100%; }
.form-submit .form-submit-spinner, .form-submit .form-submit-check { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.form-submit.is-sending .form-submit-label { opacity: 0; }
.form-submit.is-sending .form-submit-spinner { opacity: 1; }
.form-submit-spinner::after { content: ""; width: 16px; height: 16px; border: 1.5px solid rgba(10,10,10,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { margin-top: 1.5rem; padding: 1.6rem; border: 1px solid var(--line-strong); border-radius: 6px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-soft) .1s; }
.form-success.is-visible { opacity: 1; transform: translateY(0); }

/* --- Credits page --- */
.credits-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.credits-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.credits-list a { color: var(--silver); text-decoration: underline; text-underline-offset: 3px; }

/* --- Splash --- */
.splash {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-soft);
  animation: splashSafety .01s 3.5s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-mark { font-family: var(--display); font-size: 2.2rem; text-transform: uppercase; letter-spacing: .02em; }

/* --- Mapa de la escena: filtro por ciudad sobre un mapa real de Galicia
   (silueta de costa real, simplificada a partir de datos geográficos reales,
   proyectada con las mismas coordenadas que los pines) — se abre como un
   modal extra desde el filtro de ciudad de artistas.html/productores.html,
   nunca como apartado propio del menú principal. --- */
.map-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--ink-soft); font-family: var(--mono);
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.map-trigger:hover { border-color: var(--silver-dim); color: var(--ink); }
.map-trigger svg { width: 15px; height: 15px; }

.map-modal {
  border: 0; padding: 0; width: 100%; max-width: min(94vw, 900px); max-height: 92vh;
  background: var(--bg-2); border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
}
.map-modal::backdrop { background: rgba(6,6,6,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.map-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--line); }
.map-modal-title { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver-mid); }
.map-modal-hint { margin-top: .25rem; font-size: .82rem; color: var(--ink-mute); }
.map-modal-close {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); color: var(--ink);
  display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; transition: background .3s, border-color .3s;
}
.map-modal-close:hover { background: var(--silver); color: var(--bg); border-color: var(--silver); }

/* --- Globo: el mapa vive dentro de un disco circular (no un rectángulo) con
   degradado de océano + viñeta de luz, para que se lea como un globo visto de
   frente en vez de un mapa plano — el relieve real (hillshade a partir de datos
   reales de elevación) se pinta sobre la tierra dentro de ese disco. .scene-map-stage
   es quien no recorta (para que la barra de zoom, en su esquina, no quede cortada
   por el border-radius:50% del disco). --- */
.scene-map-stage { position: relative; width: min(calc(100% - 2.6rem), 74vh); max-width: 560px; margin: 1.6rem auto 1.6rem; }
.scene-map-viewport {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 32% 26%, #1b4a5e 0%, #0a222c 55%, #050f14 100%);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.07);
}
.scene-map-viewport.is-dragging { cursor: grabbing; }
.scene-map-viewport::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.3), transparent 40%),
    radial-gradient(circle at 70% 82%, rgba(0,0,0,.62), transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(0,0,0,.68) 100%);
}
.scene-map-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.scene-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-map-land { fill: none; stroke: rgba(230,232,238,.55); stroke-width: 1.3; stroke-linejoin: round; }
.scene-map-markers { position: absolute; inset: 0; z-index: 3; }

.scene-map-city {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.scene-map-avatar {
  position: relative; width: 30px; height: 30px; border-radius: 999px;
  overflow: hidden; border: 2px solid var(--silver-mid); background: var(--bg-3);
  box-shadow: 0 0 0 2px var(--bg-2);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.scene-map-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scene-map-avatar-initial {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; color: var(--ink-soft); background: var(--bg-4);
}
.scene-map-badge {
  position: absolute; bottom: -3px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 999px; background: var(--silver-hi); color: var(--bg);
  font-family: var(--mono); font-size: .58rem; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-2);
}
.scene-map-label {
  margin-top: .4rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.7);
}
.scene-map-city:hover .scene-map-avatar,
.scene-map-city:focus-visible .scene-map-avatar {
  border-color: var(--silver-hi); transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 22px 4px rgba(230,232,238,.35);
}
.scene-map-city:hover .scene-map-label,
.scene-map-city:focus-visible .scene-map-label { color: var(--ink); }

.scene-map-toolbar {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 4;
  display: flex; flex-direction: column; gap: .4rem;
}
.scene-map-toolbar button {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(10,10,10,.7); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--mono); font-size: 1rem; cursor: pointer;
  display: grid; place-items: center; transition: background .25s, border-color .25s;
}
.scene-map-toolbar button:hover { background: var(--silver); color: var(--bg); border-color: var(--silver); }

.map-modal-empty { padding: 1.3rem; color: var(--ink-mute); font-size: .9rem; }

/* --- Alley Radio (embed de Spotify) --- */
.radio-embed { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); max-width: 720px; }
.radio-embed iframe { display: block; border: 0; }

.radio-live-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.radio-live-dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--silver-dim); flex-shrink: 0;
}
.radio-live-badge.is-live { color: #ff5252; }
.radio-live-badge.is-live .radio-live-dot {
  background: #ff5252; box-shadow: 0 0 0 0 rgba(255,82,82,.55);
  animation: radioLivePulse 1.8s ease-out infinite;
}
@keyframes radioLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255,82,82,.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,82,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); }
}
.radio-schedule-hint { margin-top: .5rem; font-size: .85rem; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) {
  .radio-live-badge.is-live .radio-live-dot { animation: none; }
}

/* --- Scroll progress --- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; background: rgba(255,255,255,.06); pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--silver-dim), var(--silver-hi)); transform-origin: 0 0; transform: scaleX(0); transition: transform .08s linear; }

/* =============================================================
   7. Effects
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

[data-scale-scroll] { transform-origin: center center; will-change: transform, opacity; }

.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft);
}
.has-tilt:hover { transition-duration: .15s; }

.js-nojs-hide { display: none; }
.is-ready .js-nojs-hide { display: revert; }
.is-ready .js-nojs-show { display: none; }

/* =============================================================
   8. Responsive helpers
   ============================================================= */
@media (min-width: 540px)  { .container { max-width: 100%; } }
@media (min-width: 1600px) { .container { max-width: 1520px; } }

/* =============================================================
   9. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none; opacity: .4; }
  .kicker::before { animation: none; }
  .hero-scroll-cue::after { animation: none; }
  .chrome-text { animation: none; }
  .chrome-frame::before { animation: none; }
  .track-row.is-playing .track-wave span { animation: none; }
  .sparkle { animation: none; opacity: .55; }
}