/* Tipografías alojadas en la propia web (antes venían de Google Fonts).
   Solo el juego latino, que incluye todo el español. */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   TOKENS — tema oscuro (por defecto de la variable, ver más abajo
   el tema claro en html[data-theme="light"])
   ============================================================ */
:root {
  --bg: #0c0b09;
  --bg-panel: #1e1710;
  --bg-panel-2: #2c2114;
  --line: #35291a;
  --ink: #f1ebe0;
  --ink-muted: #a89f8f;
  --ink-faint: #6f6858;
  --gold-1: #c9a36a;
  --gold-2: #efd9ae;
  --gold-3: #8a6c3f;
  --nav-bg: rgba(12, 11, 9, 0.92);
  --placeholder-grad: linear-gradient(160deg, #201c16, #0c0b09 70%);

  /* Texto sobre fotos (videobook, publicidad...): siempre claro, tanto
     en tema claro como oscuro, porque siempre va encima de una capa
     oscura sobre la imagen (ver .card-overlay) */
  --on-photo: #f5efe0;
  --on-photo-muted: #d8cdb6;
  --on-photo-faint: #a89d86;
  --on-photo-gold: #f0dcae;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --max: 1180px;
}

/* TEMA CLARO — color arena. La web arranca en este tema (ver el
   atributo data-theme="light" en <html>); el botón de arriba
   cambia entre los dos añadiendo/quitando este atributo. */
html[data-theme="light"] {
  --bg: #f5eee0;
  --bg-panel: #ece2cd;
  --bg-panel-2: #e4d7bc;
  --line: #ddccac;
  --ink: #2a2419;
  --ink-muted: #6b5f49;
  --ink-faint: #96896b;
  --gold-1: #8a6c3f;
  --gold-2: #6b4e28;
  --gold-3: #a9824c;
  --nav-bg: rgba(245, 238, 224, 0.92);
  --placeholder-grad: linear-gradient(160deg, #e9ddc4, #f5eee0 70%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s, color 0.3s;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  z-index: 50;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.nav.nav-scrolled {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.6);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* padding-top/bottom (no el shorthand "padding") para no pisar el
     padding lateral que ya pone .wrap y así quedar alineado con el
     resto del contenido de la página */
  padding-top: 22px;
  padding-bottom: 22px;
  transition: padding 0.3s;
  position: relative;
}

.nav-scrolled .nav-inner { padding-top: 15px; padding-bottom: 15px; }

.brand {
  font-family: var(--serif);
  line-height: 1;
}

.brand-name {
  font-size: 20px;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--ink-faint);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.nav-links a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-2);
  border-color: var(--gold-3);
}

.nav-links { display: none; }

.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 1px);
  left: 14px;
  right: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5);
  animation: heroIn 0.25s ease both;
}
.nav-links.open a {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.nav-links.open a:last-child { border-bottom: none; }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.nav-toggle:hover { border-color: var(--gold-3); color: var(--gold-2); }

/* Grupo de la izquierda: menú (hamburguesa en móvil, enlaces en escritorio) */
.nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}

/* El logo flota SIEMPRE centrado en medio de la barra — independiente
   del ancho real de los grupos a los lados, así nunca se solapa con
   ellos (mismo truco que usaba antes el menú). */
.nav-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Aparece solo cuando el nombre grande del hero cruza la cabecera al
   hacer scroll (ver initHeroLogoReveal en script.js) — mientras el
   hero es visible, el logo de la cabecera no hace falta. */
.nav-logo.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* En móvil/tablet no caben el menú + el logo centrado + todos los
   iconos en una sola fila: el logo baja a su propia línea, debajo,
   para que nada se pise. (Mismo punto de corte que el bloque de abajo
   que muestra el menú en línea y quita la hamburguesa: 780px). */
@media (max-width: 779px) {
  .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav-logo {
    position: static;
    order: 3;
    flex-basis: 100%;
    transform: none;
  }
}

/* Grupo de la derecha: redes de empresa + email + tema + idioma.
   Siempre visible, también en móvil. */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}
@media (max-width: 380px) {
  .nav-right { gap: 8px; }
  .company-social { gap: 7px; }
}

/* Solo icono (sin texto), mismo tamaño que el resto de botones circulares */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--gold-3); color: var(--gold-2); }
.theme-toggle svg { width: 15px; height: 15px; }

/* Iconos de la EMPRESA (Instagram/LinkedIn/TikTok), junto al logo */
.company-social {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
}
.company-social a,
.company-social span { display: flex; transition: color 0.2s, transform 0.2s; }
.company-social a:hover { color: var(--gold-2); transform: translateY(-1px); }

/* Menú en línea solo cuando la cabecera tiene su ancho máximo (1180 px):
   con "NUESTRO TALENTO" el menú es más largo y por debajo chocaría con
   el logo centrado. */
@media (min-width: 1180px) {
  .nav-links { display: flex; background: none; border: none; flex-direction: row; animation: none; }
  .nav-links.open a { padding-bottom: 3px; border-bottom: 1px solid transparent; }
  .nav-toggle { display: none; }
}

/* ============================================================
   HERO: solo el logo, limpio y en una franja estrecha (sin fotos de
   fondo, sin frase ni botón). Mismo formato de siempre: GONLU grande
   y MANAGEMENT debajo, aquí entre dos líneas finas doradas que se
   difuminan hacia los lados. MANAGEMENT ocupa justo el ancho de GONLU.
   ============================================================ */
.hero {
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) { .hero { padding: 44px 0 40px; } }
.hero-grid { display: flex; justify-content: center; }
.hero-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.hero-name {
  margin: 0;
  /* el espaciado deja aire tras la última letra: se compensa delante
     para que GONLU quede centrado de verdad */
  padding-left: 0.16em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 8.5vw, 92px);
  line-height: 1;
  letter-spacing: 0.16em;
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 45%, var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: 0.5em;
  color: var(--ink-muted);
  animation: heroIn 1s cubic-bezier(0.16, 1, 0.3, 1) both 0.12s;
}
/* v11.13: sin las líneas a los lados de MANAGEMENT (lo pidieron así) */
.hero-sub { justify-content: center; }
/* misma compensación del espaciado que en GONLU */
#heroEyebrow { padding-left: 0.5em; }
/* Una línea bajo el logo que dice qué somos: pequeña y discreta */
.hero-claim {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink-muted);
  text-wrap: balance; /* en móvil reparte las dos líneas */
  animation: heroIn 1s cubic-bezier(0.16, 1, 0.3, 1) both 0.24s;
}
@media (prefers-reduced-motion: reduce) { .hero-claim { animation: none; } }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-name, .hero-sub { animation: none; }
}

/* ============================================================
   REVEAL AL HACER SCROLL
   Añade la clase "reveal" a cualquier bloque y aparecerá con
   una animación suave cuando entre en pantalla (ver script.js).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--gold-2); /* algo más oscuro que gold-1, para que se lea bien (contraste) */
}

/* Oculto a la vista pero presente para buscadores y lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  margin: 10px 0 0;
}

.section-rule {
  width: 46px;
  height: 1px;
  background: var(--gold-3);
  margin-top: 22px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.footer-legal { display: flex; gap: 10px; margin-top: 6px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
/* Escritorio: los enlaces legales abajo a la derecha (el nombre sigue centrado) */
@media (min-width: 720px) {
  .footer-inner { position: relative; }
  .footer-legal { position: absolute; right: 0; bottom: 0; margin-top: 0; }
}
.footer-legal a { color: var(--ink-muted); transition: color 0.2s; }
.footer-legal a:hover { color: var(--gold-2); }
.footer-inner strong {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.btn {
  border: 1px solid var(--line);
  padding: 13px 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s, color 0.2s;
}
.btn:hover { border-color: var(--gold-3); color: var(--gold-2); }
.btn-solid {
  background: var(--gold-1);
  color: #171310;
  border-color: var(--gold-1);
}
.btn-solid:hover { background: var(--gold-2); border-color: var(--gold-2); color: #171310; }

.social-row {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}
.social-row span,
.social-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
a.social-icon:hover {
  border-color: var(--gold-3);
  color: var(--gold-2);
  transform: translateY(-2px);
}

/* Imagen real de fondo (Founder, showcase...) */
.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   4 datos breves de la trayectoria de Yon (bajo el hero)
   ============================================================ */
.founder-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .founder-details { grid-template-columns: repeat(4, 1fr); }
}
.founder-detail {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.founder-detail-dato {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold-1);
}
.founder-detail-texto {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ============================================================
   Frase larga del fundador + sus redes (bajo los 4 datos)
   ============================================================ */
/* ============================================================
   FOUNDER: foto CONTENIDA a la izquierda, texto a la derecha
   ============================================================ */
.founder-band {
  background: var(--bg-panel);
}

/* Junta la franja de datos con Founder (mismo color, sin hueco entre medio) */
#founder {
  padding-bottom: 20px;
}
#founder + #detalles {
  padding-top: 0;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 780px) {
  .founder-grid { grid-template-columns: 0.8fr 1.2fr; }
}

.founder-photo-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--placeholder-grad);
}
/* Pantalla realmente estrecha (móvil): ocupa todo el ancho, sin tope */
@media (max-width: 480px) {
  .founder-photo-box { max-width: none; aspect-ratio: 4 / 5; }
}
/* Escritorio (dos columnas): pegada a la izquierda de su columna,
   no centrada */
@media (min-width: 780px) {
  .founder-photo-box { margin: 0; }
}

.founder-message {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}

/* Biografía en párrafos (founder.texto): letra normal, sin cursiva */
.founder-message.is-bio {
  font-family: inherit;
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-muted);
}
.founder-message.is-bio p { margin: 0 0 16px; }
.founder-message.is-bio p:first-child {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--ink);
}

.founder-photo-box:hover .card-bg { transform: scale(1.05); }

/* ============================================================
   ARTISTAS: filtros por categoría + rejilla con todos.
   Los filtros se marcan/desmarcan (varios a la vez); sin ninguno
   marcado salen todos. Escritorio: máx. 3 columnas y las filas que
   hagan falta; tablet: 2; móvil: slider (1 y asoma la siguiente).
   Al pulsar, popup con sus redes.
   ============================================================ */
/* Filtros tipo "píldora": nunca se desplazan; si no caben en una
   línea, bajan a la siguiente. Los marcados van rellenos en dorado. */
.artists-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.artists-cats[hidden] { display: none !important; }
.artists-tab {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.artists-tab:hover { color: var(--ink); border-color: var(--gold-3); }
.artists-tab.is-active,
.artists-tab.is-active:hover {
  background: var(--gold-1);
  border-color: var(--gold-1);
  color: var(--bg);
}
/* Una ✕ pequeña en los marcados, para que se vea que se pueden quitar */
.artists-tab.is-active::after { content: "✕"; margin-left: 10px; font-size: 9px; letter-spacing: 0; }
/* Al medir si caben (script.js), se cuenta la ✕ en todos, para que marcar
   uno no empuje otro a la fila de abajo */
.artists-cats.is-measuring .artists-tab::after { content: "✕"; margin-left: 10px; font-size: 9px; letter-spacing: 0; }
/* En cuanto las píldoras no caben en una fila (lo detecta script.js y
   pone .is-compact), pasan a una cuadrícula fija de 2 columnas, botones
   del mismo ancho y texto centrado, en vez de bajar de línea desiguales */
.artists-cats.is-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.artists-cats.is-compact .artists-tab {
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  /* si el texto no cabe, pasa a dos líneas dentro del botón */
}
/* si el número de categorías es impar, la última ocupa todo el ancho */
.artists-cats.is-compact .artists-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
.artists-cats.is-compact .artists-tab.is-active::after { margin-left: 6px; }
@media (min-width: 640px) {
  .artists-cats.is-compact .artists-tab { padding: 13px 12px; font-size: 11px; letter-spacing: 0.16em; }
}


.artists-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  margin-top: 28px;
}
.artists-grid .artist-card[hidden] { display: none; }
@media (min-width: 980px) { .artists-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } }
/* Móvil: slider horizontal (deslizar con el dedo) que llega hasta el
   borde de la pantalla. Cada tarjeta ocupa el 82% para que asome la
   siguiente. */
@media (max-width: 639px) {
  .artists-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -22px;
    margin-right: -22px;
    padding: 0 22px 6px;
    scroll-padding: 0 22px;
  }
  .artists-grid::-webkit-scrollbar { display: none; }
  .artists-grid .artist-card { flex: 0 0 82%; scroll-snap-align: start; }
}
/* Al cambiar los filtros, las tarjetas entran con un fundido */
.artists-grid.is-filtering .artist-card { animation: artistsIn 0.4s ease both; }
@keyframes artistsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .artists-grid.is-filtering .artist-card { animation: none; } }

/* Etiqueta(s) de categoría abajo a la derecha, una debajo de otra y en el
   orden de las categorías, para no tapar la cara. El nombre va abajo a la
   izquierda, así que las etiquetas no pasan de la mitad derecha. */
.artist-tags {
  position: absolute;
  right: 14px;
  bottom: 22px;
  z-index: 3;
  max-width: 56%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  pointer-events: none;
}
.artist-tag {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(12, 11, 9, 0.45);
  backdrop-filter: blur(6px);
  color: #f5eee0;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* si no cabe, se parte en dos líneas dentro de su píldora (no pisa el nombre) */
  white-space: normal;
  text-align: right;
  line-height: 1.3;
}
/* Móvil: como en escritorio, abajo a la derecha a la altura del nombre.
   La tarjeta es estrecha, así que las etiquetas no pasan de un tercio del
   ancho (34 %) y, si una no cabe, se parte en dos líneas dentro de su píldora
   (p. ej. "DIRECTOR DE / CINE Y TV"); el nombre, algo menor. */
@media (max-width: 639px) {
  /* móvil: la tarjeta es estrecha, así que los tags van en su propia fila,
     abajo a la derecha, y el nombre justo encima (nunca se pisan) */
  .artist-tags { right: 12px; bottom: 14px; max-width: 80%; }
  .artist-tag {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 8px;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
  }
  .artist-name { font-size: 17px; }
}

/* Tarjeta estilo Vertical: foto a toda la tarjeta y nombre + texto
   ENCIMA, sobre un degradado oscuro. Misma proporción para todas,
   así las fotos quedan siempre alineadas aunque el texto varíe. */
.artist-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--placeholder-grad);
  color: var(--on-photo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.artist-card .card-bg { background-position: center top; }
.artist-card .card-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* tarjeta vacía que reserva el sitio mientras cargan los artistas */
.artist-card.is-placeholder { cursor: default; }
.artist-card.is-placeholder::before { display: none; }
/* "bajarFoto" en datos.js: la foto se coloca más abajo (deja aire arriba,
   p. ej. si en el original el pelo toca el borde). Arriba queda una
   franja oscura que se funde con la foto, como una viñeta. */
.artist-card.is-bajada .card-bg {
  top: var(--bajar);
  background-position: center top;
}
.artist-card.is-bajada { background: #14120f; }
.artist-card.is-bajada .card-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 22%;
  background: linear-gradient(to bottom, #14120f 0%, rgba(20, 18, 15, 0.6) 40%, rgba(20, 18, 15, 0) 100%);
}
.artist-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 11, 9, 0.92) 0%, rgba(12, 11, 9, 0.55) 38%, rgba(12, 11, 9, 0) 65%);
  transition: opacity 0.4s;
}
.artist-card:hover .card-bg,
.artist-card:focus-visible .card-bg { transform: scale(1.05); }

.artist-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px 22px 22px;
}
.artist-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--on-photo);
  transition: color 0.2s;
}
.artist-card:hover .artist-name { color: var(--on-photo-gold); }
.artist-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-photo-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botón "+" arriba a la derecha: indica que hay más (sus redes) */
.artist-more {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 224, 0.5);
  background: rgba(12, 11, 9, 0.35);
  font-size: 12px;
  line-height: 1;
  color: var(--on-photo);
  transition: background-color 0.25s, border-color 0.25s, transform 0.3s;
}
.artist-card:hover .artist-more {
  background: var(--on-photo-gold);
  border-color: var(--on-photo-gold);
  color: #171310;
  transform: rotate(90deg);
}

/* ============================================================
   SOBRE NOSOTROS: título a la izquierda, texto a la derecha,
   y 3 pilares debajo
   ============================================================ */
#about { padding-top: 96px; }
.about-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 860px) { .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.about-text p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-muted);
}
.about-text p:first-child {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.55;
  color: var(--ink);
}
.about-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 56px;
}
@media (min-width: 720px) { .about-pillars { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.about-pillar {
  border-top: 1px solid var(--gold-3);
  padding-top: 16px;
}
.about-pillar h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.about-pillar p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ============================================================
   POPUP del artista
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.7);
  backdrop-filter: blur(4px);
  animation: modalFade 0.25s ease both;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  animation: modalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Escritorio: 2/3 foto, 1/3 redes */
@media (min-width: 720px) {
  .modal-card { grid-template-columns: 2fr 1fr; height: min(620px, calc(100vh - 40px)); }
  .modal-photo { height: 100%; }
}
.modal-photo {
  min-height: 260px;
  background: var(--placeholder-grad) center top / cover no-repeat;
}
@media (max-width: 719px) { .modal-photo { aspect-ratio: 4 / 3; } }
/* Todos los popups usan este diseño (las clases is-video / has-video van
   fijas en index.html), como en original_v6_roster: una VENTANA parcial
   centrada, no a pantalla completa.
   Escritorio: 2/3 para la foto o el vídeo a la izquierda y 1/3 con
   nombre y redes a la derecha (máx. 980 × 620 px).
   Móvil: la foto o el vídeo arriba y las redes debajo, con margen.
   Sin vídeo, la foto llena su hueco (recortada, como en el roster); con
   vídeo, se ve entero sobre la foto desenfocada. */
.modal.is-video { padding: 16px; }
.modal.is-video .modal-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}
@media (min-width: 720px) {
  .modal.is-video { padding: 20px; }
  .modal.is-video .modal-card {
    max-width: 980px;
    height: min(620px, calc(100vh - 40px));
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    /* v13: se amplía a escala (la caja sigue siendo 980 × 620 por dentro, así que fotos, vídeos, textos y
       miniaturas crecen a la vez y mantienen sus proporciones). --k lo calcula script.js según la pantalla:
       1 en pantallas pequeñas y móvil, hasta 1,35 en pantallas grandes. */
    scale: var(--k, 1);
  }
}
.modal-photo.has-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 28px;
  overflow: hidden;
  background-color: #000;
  container-type: size;
}
.modal-photo.has-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 9, 0.8);
  backdrop-filter: blur(14px);
}
.modal-photo.has-video iframe,
.modal-photo.has-video video {
  position: relative;
  display: block;
  border: 0;
  background: #000;
  /* por si el navegador es antiguo */
  width: 100%;
  aspect-ratio: 16 / 9;
  /* lo más grande que quepa en el hueco, sin recortar (16:9) */
  width: min(100cqw, 100cqh * 16 / 9);
  height: min(100cqh, 100cqw * 9 / 16);
}
/* VARIOS REELS: el vídeo arriba (lo más grande posible) y debajo una
   tira de miniaturas con el nombre y la duración de cada uno. Con un
   solo vídeo no hay tira y se ve como siempre. */
.modal-photo.has-reels {
  flex-direction: column;
  align-items: stretch;
  padding: 22px 22px 16px;
  gap: 14px;
  container-type: normal;
}
.reel-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.reel-thumbs {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.reel-thumb {
  flex: 0 0 168px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #000;
  color: #f5eee0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}
.reel-thumb:hover,
.reel-thumb:focus-visible { opacity: 1; }
.reel-thumb.is-active { opacity: 1; border-color: var(--on-photo-gold); }
.reel-thumb img,
.reel-noimg { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: center / cover no-repeat; }
.reel-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.reel-label i { font-style: normal; letter-spacing: 0.05em; color: rgba(245, 238, 224, 0.6); }
@media (max-width: 719px) {
  .modal-photo.has-reels,
  .modal-photo.has-video.has-reels { aspect-ratio: auto; height: auto; min-height: 0; padding: 0 0 12px; gap: 12px; display: flex; }
  .reel-stage { flex: 0 0 auto; container-type: normal; display: block; }
  .reel-thumbs { flex: 0 0 auto; }
  .modal-photo.has-reels .reel-stage video,
  .modal-photo.has-reels .reel-stage iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .reel-thumbs { padding: 0 12px; }
  .reel-thumb { flex-basis: 140px; }
}

/* Sin vídeo: la foto llena todo el hueco (recortada, centrada arriba) */
.modal-photo.has-video.is-photo { padding: 0; }
.modal-photo.has-video.is-photo::before { display: none; }
@media (max-width: 719px) {
  .modal-photo.has-video.is-photo { aspect-ratio: 4 / 3; height: auto; }
}
.modal-photo.has-video.is-vertical iframe,
.modal-photo.has-video.is-vertical video {
  aspect-ratio: 9 / 16;
  width: min(100cqw, 100cqh * 9 / 16);
  height: min(100cqh, 100cqw * 16 / 9);
}
@media (max-width: 719px) {
  /* el vídeo ocupa el ancho del popup (16:9); los verticales, más alto */
  .modal-photo.has-video { aspect-ratio: 16 / 9; height: auto; padding: 0; }
  .modal-photo.has-video.is-vertical { aspect-ratio: auto; height: 62vh; height: 62dvh; padding: 10px 0; }
  .modal.is-video .modal-body { padding: 28px 22px 24px; }
}
/* La ✕, en oscuro para que se vea siempre (en móvil va sobre la foto o el vídeo) */
.modal.is-video .modal-close {
  background: rgba(12, 11, 9, 0.65);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f5eee0;
}
.modal.is-video .modal-close:hover { border-color: var(--gold-3); color: var(--gold-2); }
/* en escritorio la ✕ cae sobre la columna clara: la normal, como en el roster */
@media (min-width: 720px) {
  .modal.is-video .modal-close { background: var(--bg); border-color: var(--line); color: var(--ink); }
}
.modal-body { padding: 56px 24px 28px; overflow: auto; }
.modal-name {
  margin: 10px 0 22px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
}
.modal-links { display: flex; flex-direction: column; }
.modal-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  transition: color 0.2s, padding-left 0.25s;
}
.modal-link:last-child { border-bottom: 1px solid var(--line); }
.modal-link:hover { color: var(--gold-2); padding-left: 6px; }
.modal-link .arrow { margin-left: auto; }
.modal-empty { font-size: 14px; color: var(--ink-faint); }

/* Fotos o vídeos extra bajo las redes (v12; "galeria" en el datos.js del artista):
   con el vídeo en el centro salen sus fotos aquí; al pulsar una foto pasa al centro
   y aquí bajan los vídeos. */
/* La columna de redes pasa a columna flexible para que las fotos/vídeos queden ABAJO del todo */
.modal-body { display: flex; flex-direction: column; }
.modal-body > * { flex: 0 0 auto; }
.modal-extra:empty { display: none; }
.modal-extra { margin-top: auto; padding-top: 24px; text-align: center; }
.extra-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; }
.extra-title {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}
.extra-pager { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-faint); }
.extra-pager i { font-style: normal; letter-spacing: 0.08em; min-width: 26px; text-align: center; }
.extra-page {
  width: 24px;
  height: 24px;
  padding: 0 0 2px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.extra-page:hover:not(:disabled) { border-color: var(--gold-3); color: var(--gold-2); }
.extra-page:disabled { opacity: 0.3; cursor: default; }
/* Fotos y vídeos: MISMA rejilla (3 × 2 = 6 por página) y recuadros cuadrados del mismo tamaño;
   la última fila, si no se llena, queda centrada. */
.extra-photos,
.extra-videos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.extra-photo,
.extra-video {
  position: relative;
  flex: 0 0 calc((100% - 12px) / 3);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--line);
  background: #0c0b09;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, border-color 0.2s;
}
.extra-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.extra-photo:hover,
.extra-photo:focus-visible,
.extra-video:hover,
.extra-video:focus-visible { opacity: 1; border-color: var(--gold-3); }
.extra-video { color: #f5eee0; font: inherit; text-align: left; }
.extra-video-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.extra-video-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 24px 5px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 70%);
  font-size: 8px;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.extra-video-label i { font-style: normal; letter-spacing: 0.04em; color: rgba(245, 238, 224, 0.7); }

/* Foto grande en el centro (galería) con su tira de miniaturas debajo */
.reel-stage .gal-img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.reel-thumbs.is-photos { justify-content: center; justify-content: safe center; }
.reel-thumbs.is-photos .reel-thumb { flex: 0 0 54px; }
.reel-thumbs.is-photos .reel-thumb img { aspect-ratio: 3 / 4; }
/* Tiras de miniaturas sin barra de scroll: flechas a los lados (initStrip en script.js) */
.reel-strip { position: relative; flex: 0 0 auto; min-width: 0; }
.reel-strip .reel-thumbs { scrollbar-width: none; -ms-overflow-style: none; }
.reel-strip .reel-thumbs::-webkit-scrollbar { display: none; }
.strip-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(12, 11, 9, 0.78);
  color: #f5eee0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.strip-arrow[hidden] { display: none; }
.strip-arrow:hover { border-color: var(--on-photo-gold); color: var(--on-photo-gold); }
.strip-arrow.prev { left: 4px; }
.strip-arrow.next { right: 4px; }
@media (max-width: 719px) {
  .reel-stage .gal-img { width: 100%; height: min(60vh, 120vw); max-width: none; max-height: none; box-shadow: none; }
  .reel-thumbs.is-photos .reel-thumb { flex-basis: 54px; }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.modal-close:hover { border-color: var(--gold-3); color: var(--gold-2); }
body.modal-open { overflow: hidden; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-card { animation: none; } }

/* ============================================================
   Botón de idioma (ES/EN), detecta el del navegador
   ============================================================ */
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.lang-toggle:hover { border-color: var(--gold-3); color: var(--gold-2); }

/* Móvil: el nombre deja sitio abajo para la fila de tags (va aquí, al final,
   para que no la pise la regla general de .artist-info) */
@media (max-width: 639px) {
  .artist-info { padding-bottom: 44px; }
}