/* ============================================================================
   RANCHO STUDIOS INC — HOJA DE ESTILOS PRINCIPAL
   ----------------------------------------------------------------------------
   ÍNDICE
     01. Tokens de diseño (colores, tipografía, espacios)
     02. Reset y base
     03. Tipografía
     04. Layout y utilidades
     05. Botones
     06. Header y navegación
     07. Buscador
     08. Hero
     09. Secciones y encabezados
     10. Tarjetas de artista
     11. Grid de lanzamientos
     12. Servicios
     13. Página Nosotros
     14. Perfil de artista
     15. Música / streaming
     16. Formulario de contacto
     17. Footer
     18. Aviso modo demo
     19. Animaciones
     20. Responsive
     21. Impresión y accesibilidad
   ============================================================================ */


/* ============================================================================
   01. TOKENS DE DISEÑO
   ============================================================================ */

:root {

  /* --- Morado profundo: color dominante de la marca ---------------------- */
  --morado-950: #1A0030;   /* casi negro con alma morada */
  --morado-900: #2A0049;
  --morado-800: #35005C;
  --morado-700: #4A0080;   /* ★ PRINCIPAL */
  --morado-600: #5B2C8A;   /* ★ SECUNDARIO */
  --morado-500: #7A3FB5;
  --morado-300: #B48FDA;
  --morado-100: #EDE3F7;
  --morado-050: #F6F1FB;

  /* --- Dorado / ocre del llano ------------------------------------------ */
  --oro-700: #8C6E15;
  --oro-600: #A8851C;
  --oro-500: #C9A227;      /* ★ ACENTO PRINCIPAL */
  --oro-400: #D4AF37;      /* ★ ACENTO CLARO */
  --oro-300: #E3C868;
  --oro-100: #F3E7BD;

  /* --- Neutros ---------------------------------------------------------- */
  --negro:     #0B0710;    /* negro profundo con matiz morado */
  --negro-2:   #14101C;
  --negro-3:   #221C30;
  --crema:     #F8F1E3;    /* crema suave */
  --crema-2:   #F1E8D6;
  --blanco:    #FFFFFF;
  --gris-900:  #1C1822;
  --gris-700:  #453F52;
  --gris-500:  #6E6779;
  --gris-300:  #C7C2CF;
  --gris-200:  #E4E0EA;
  --gris-100:  #F2F0F5;

  /* --- Roles semánticos ------------------------------------------------- */
  --fondo:            var(--blanco);
  --fondo-alt:        var(--crema);
  --texto:            var(--gris-900);
  --texto-suave:      var(--gris-500);
  --texto-inverso:    var(--blanco);
  --borde:            var(--gris-200);
  --borde-oscuro:     rgba(255, 255, 255, .14);

  /* --- Tipografía ------------------------------------------------------- */
  --fuente-display: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fuente-cuerpo:  'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida: se adapta sola entre móvil y escritorio */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --t-base: clamp(0.98rem, 0.94rem + 0.20vw, 1.08rem);
  --t-md:   clamp(1.10rem, 1.03rem + 0.34vw, 1.30rem);
  --t-lg:   clamp(1.35rem, 1.18rem + 0.78vw, 1.85rem);
  --t-xl:   clamp(1.75rem, 1.40rem + 1.60vw, 2.85rem);
  --t-2xl:  clamp(2.20rem, 1.55rem + 2.90vw, 4.20rem);
  --t-3xl:  clamp(2.80rem, 1.70rem + 4.80vw, 6.00rem);

  /* --- Espaciado -------------------------------------------------------- */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;
  --e-8:  4rem;
  --e-9:  6rem;
  --seccion-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* --- Medidas ---------------------------------------------------------- */
  --ancho-max: 1360px;
  --ancho-texto: 68ch;
  --header-h: 76px;

  /* --- Radios y sombras ------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  --sombra-sm: 0 1px 2px rgba(11, 7, 16, .06), 0 2px 8px rgba(11, 7, 16, .05);
  --sombra-md: 0 4px 12px rgba(11, 7, 16, .08), 0 12px 32px rgba(11, 7, 16, .08);
  --sombra-lg: 0 8px 24px rgba(26, 0, 48, .14), 0 24px 64px rgba(26, 0, 48, .16);
  --sombra-oro: 0 8px 28px rgba(201, 162, 39, .28);

  /* --- Transiciones ----------------------------------------------------- */
  --tr-rapida: 160ms cubic-bezier(.4, 0, .2, 1);
  --tr-media:  280ms cubic-bezier(.4, 0, .2, 1);
  --tr-lenta:  520ms cubic-bezier(.22, 1, .36, 1);
}


/* ============================================================================
   02. RESET Y BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.sin-scroll { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: var(--e-6) 0;
}

::selection { background: var(--morado-700); color: var(--blanco); }

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

/* Enlace de salto para lectores de pantalla y teclado */
.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--oro-400);
  color: var(--negro);
  padding: var(--e-3) var(--e-5);
  font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
}
.saltar-contenido:focus { left: 0; }


/* ============================================================================
   03. TIPOGRAFÍA
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-display);
  margin: 0 0 var(--e-4);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* Marca RANCHO — tipografía más fuerte y con tracking amplio */
.marca-rancho {
  font-family: var(--fuente-display);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Antetítulo dorado que abre cada sección */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-600);
  margin-bottom: var(--e-4);
}
.antetitulo::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--oro-500);
  flex: none;
}
.antetitulo--claro { color: var(--oro-400); }
.antetitulo--claro::before { background: var(--oro-400); }
.antetitulo--centrado { justify-content: center; }

.entradilla {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}
.entradilla--claro { color: rgba(255, 255, 255, .78); }

.texto-oro { color: var(--oro-500); }
.texto-morado { color: var(--morado-700); }
.texto-centrado { text-align: center; }
.texto-suave { color: var(--texto-suave); }

.cita-destacada {
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-left: 3px solid var(--oro-500);
  padding-left: var(--e-5);
  margin: var(--e-6) 0;
  max-width: 30ch;
}


/* ============================================================================
   04. LAYOUT Y UTILIDADES
   ============================================================================ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.contenedor--estrecho { max-width: 860px; }

.seccion { padding-block: var(--seccion-y); }
.seccion--compacta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.seccion--crema { background: var(--crema); }
.seccion--gris  { background: var(--gris-100); }

.seccion--morada {
  background: var(--morado-700);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(122, 63, 181, .55), transparent 70%),
    radial-gradient(ellipse 70% 60% at 90% 100%, rgba(201, 162, 39, .18), transparent 70%);
  color: var(--texto-inverso);
}
.seccion--negra {
  background: var(--negro);
  background-image: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(74, 0, 128, .55), transparent 72%);
  color: var(--texto-inverso);
}
.seccion--morada h1, .seccion--morada h2, .seccion--morada h3,
.seccion--negra  h1, .seccion--negra  h2, .seccion--negra  h3 { color: var(--blanco); }

.grid { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.flex-entre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.pila { display: flex; flex-direction: column; }
.fila { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.oculto { display: none !important; }

/* Contenedores de iconos que rellena app.js: nunca deben encogerse */
[data-rs-icono] { display: inline-flex; flex: none; }

/* ---------------------------------------------------------------------------
   MARCADOR VISUAL GENERADO
   ---------------------------------------------------------------------------
   Ocupa el lugar de la foto mientras no haya una imagen real cargada.
   Es CSS puro (degradado + iniciales), así que no cuesta ninguna descarga
   ni decodificación de imagen. En cuanto rellenes el campo `imagen` de un
   artista en data/artistas.js, ese artista deja de usarlo automáticamente.
   --------------------------------------------------------------------------- */
.marco-generado {
  display: grid;
  place-items: center;
  background: linear-gradient(142deg, var(--g1, #4A0080), var(--g2, #1A0030));
  color: rgba(248, 241, 227, .94);
  font-family: var(--fuente-display);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  user-select: none;
  overflow: hidden;
}
/* Filete dorado diagonal: evoca las cuerdas del arpa sin cargar ningún archivo */
.marco-generado::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(96deg,
      transparent 0 13%,
      rgba(212, 175, 55, .16) 13% calc(13% + 2px),
      transparent calc(13% + 2px) 26%);
  pointer-events: none;
}

.divisor-oro {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--oro-500), var(--oro-300));
  border-radius: var(--r-full);
  margin: var(--e-5) 0;
}
.divisor-oro--centrado { margin-inline: auto; }


/* ============================================================================
   05. BOTONES
   ============================================================================ */

.btn {
  --btn-bg: var(--morado-700);
  --btn-color: var(--blanco);
  --btn-borde: var(--morado-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: 0.95em 1.9em;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 2px solid var(--btn-borde);
  border-radius: var(--r-full);
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--tr-rapida), color var(--tr-rapida),
              border-color var(--tr-rapida), transform var(--tr-rapida),
              box-shadow var(--tr-rapida);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn:hover {
  --btn-bg: var(--morado-600);
  --btn-borde: var(--oro-500);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}
.btn:active { transform: translateY(0); }

/* Dorado — llamada a la acción principal */
.btn--oro {
  --btn-bg: var(--oro-500);
  --btn-color: var(--negro);
  --btn-borde: var(--oro-500);
}
.btn--oro:hover {
  --btn-bg: var(--oro-400);
  --btn-borde: var(--oro-400);
  box-shadow: var(--sombra-oro);
}

/* Contorno claro — sobre fondos oscuros */
.btn--contorno {
  --btn-bg: transparent;
  --btn-color: var(--blanco);
  --btn-borde: rgba(255, 255, 255, .55);
}
.btn--contorno:hover {
  --btn-bg: var(--blanco);
  --btn-color: var(--morado-700);
  --btn-borde: var(--blanco);
}

/* Contorno oscuro — sobre fondos claros */
.btn--contorno-oscuro {
  --btn-bg: transparent;
  --btn-color: var(--morado-700);
  --btn-borde: var(--morado-700);
}
.btn--contorno-oscuro:hover {
  --btn-bg: var(--morado-700);
  --btn-color: var(--blanco);
}

.btn--grande { padding: 1.1em 2.4em; font-size: var(--t-base); }
.btn--bloque { width: 100%; }


/* ============================================================================
   06. HEADER Y NAVEGACIÓN
   ============================================================================ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  /* Fondo sólido a propósito: un backdrop-filter aquí obliga al navegador a
     recomponer toda la página en cada scroll y hunde el rendimiento. */
  background: rgba(11, 7, 16, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background var(--tr-media), border-color var(--tr-media);
}
.header.esta-fijo {
  background: var(--negro);
  border-bottom-color: rgba(201, 162, 39, .35);
}

.header__interior {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

/* --- Logo --------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: var(--blanco);
}
.logo__marca { width: 34px; height: 34px; flex: none; color: var(--oro-400); }
.logo__texto { display: flex; flex-direction: column; line-height: 1; }
.logo__nombre {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 1.06rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.logo__sub {
  font-size: 0.55rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-top: 4px;
  font-weight: 600;
}

/* --- Navegación principal ----------------------------------------------- */
.nav { margin-left: auto; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.6rem);
}

.nav__enlace {
  position: relative;
  display: block;
  padding: 0.5rem 0.2rem;
  font-family: var(--fuente-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color var(--tr-rapida);
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--oro-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr-media);
}
.nav__enlace:hover { color: var(--blanco); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="page"] { color: var(--blanco); }

/* --- Acciones (buscador + menú móvil) ----------------------------------- */
.header__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: none;
  margin-left: var(--e-4);
}

.icono-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  color: var(--blanco);
  transition: background var(--tr-rapida), color var(--tr-rapida);
}
.icono-btn:hover { background: rgba(255, 255, 255, .12); color: var(--oro-400); }
.icono-btn svg { width: 20px; height: 20px; }

/* --- Botón hamburguesa --------------------------------------------------- */
.hamburguesa { display: none; }
.hamburguesa__barra {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tr-media), opacity var(--tr-rapida);
}
.hamburguesa__barra + .hamburguesa__barra { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================================
   07. BUSCADOR
   ============================================================================ */

.buscador {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(11, 7, 16, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: start center;
  padding: clamp(4rem, 12vh, 9rem) var(--e-5) var(--e-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr-media), visibility var(--tr-media);
}
.buscador.esta-abierto { opacity: 1; visibility: visible; }

.buscador__caja { width: 100%; max-width: 720px; }

.buscador__campo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  border-bottom: 2px solid rgba(255, 255, 255, .25);
  padding-bottom: var(--e-4);
}
.buscador__campo svg { width: 24px; height: 24px; color: var(--oro-400); flex: none; }

.buscador__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.buscador__input::placeholder { color: rgba(255, 255, 255, .38); }

.buscador__pista {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .5);
}

.buscador__resultados {
  margin-top: var(--e-5);
  max-height: 48vh;
  overflow-y: auto;
}

.resultado {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  color: var(--blanco);
  transition: background var(--tr-rapida);
}
.resultado:hover { background: rgba(255, 255, 255, .09); }
.resultado__mini {
  position: relative;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  flex: none;
  object-fit: cover;
  background: var(--morado-700);
  font-size: .82rem;
}
.resultado__titulo { font-weight: 700; font-family: var(--fuente-display); }
.resultado__meta { font-size: var(--t-xs); color: rgba(255, 255, 255, .55); }
.resultado__tipo {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-400);
  flex: none;
}


/* ============================================================================
   08. HERO
   ============================================================================ */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  margin-top: var(--header-h);
  display: grid;
  isolation: isolate;
  background: var(--negro);
  overflow: hidden;
}

.hero__diapositivas { position: absolute; inset: 0; }

.hero__diapositiva {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(.4, 0, .2, 1);
}
.hero__diapositiva.esta-activa { opacity: 1; }

.hero__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* NOTA: el efecto "Ken Burns" (zoom lento) está desactivado a propósito.
   Escalar una imagen a pantalla completa durante 9 s obliga al navegador a
   re-rasterizarla en cada fotograma. Cuando sustituyas los SVG por fotos JPG
   optimizadas puedes reactivarlo quitando el comentario de estas dos reglas:

   .hero__imagen { transform: scale(1.06); transition: transform 9s linear; }
   .hero__diapositiva.esta-activa .hero__imagen { transform: scale(1); }        */

/* Superposición morada: da unidad de marca a cualquier fotografía */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 16, .62) 0%, rgba(11, 7, 16, .18) 40%, rgba(26, 0, 48, .78) 100%),
    linear-gradient(105deg, rgba(74, 0, 128, .60) 0%, rgba(74, 0, 128, .14) 58%, transparent 100%);
}

.hero__contenido {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  padding-block: clamp(5rem, 12vh, 9rem);
  color: var(--blanco);
}

.hero__texto { max-width: 780px; }

.hero__titulo {
  font-size: var(--t-3xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin-bottom: var(--e-4);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
}
.hero__titulo .marca-rancho { display: block; letter-spacing: 0.02em; }

.hero__subtitulo {
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-bottom: var(--e-6);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* --- Controles del carrusel --------------------------------------------- */
.hero__controles {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  pointer-events: none;
}
.hero__controles > * { pointer-events: auto; }

.hero__puntos { display: flex; gap: var(--e-3); align-items: center; }
.hero__punto {
  width: 40px;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .3);
  transition: background var(--tr-media);
}
.hero__punto[aria-selected="true"] { background: var(--oro-400); }

.hero__flechas { display: flex; gap: var(--e-2); }
.hero__flecha {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-full);
  color: var(--blanco);
  transition: background var(--tr-rapida), border-color var(--tr-rapida), color var(--tr-rapida);
}
.hero__flecha:hover {
  background: var(--oro-400);
  border-color: var(--oro-400);
  color: var(--negro);
}
.hero__flecha svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   BANNER DE PORTADA — mosaico de carátulas en movimiento
   ---------------------------------------------------------------------------
   Las carátulas son cuadradas y llevan el nombre del artista impreso, así que
   se muestran enteras (nunca recortadas) formando un muro que se desplaza en
   diagonal. Encima va un velo morado profundo que garantiza el contraste del
   titular y unifica portadas de estilos muy distintos bajo la misma marca.
   --------------------------------------------------------------------------- */

.banner {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(94vh, 940px);
  display: grid;
  isolation: isolate;
  overflow: hidden;
  background: var(--negro);
}

/* Muro de carátulas, inclinado y sobredimensionado para que la rotación
   nunca deje ver los bordes del contenedor. */
.banner__mosaico {
  position: absolute;
  /* Sobredimensionado sobre todo en vertical: con 7° de giro basta un margen
     horizontal pequeño, y cada punto de más encarece el rasterizado. */
  inset: -30% -8%;
  z-index: 0;
  display: grid;
  align-content: center;
  gap: clamp(0.6rem, 1.2vw, 1.15rem);
  transform: rotate(-7deg);
}

.marquesina {
  overflow: hidden;
  contain: paint;
}

.marquesina__pista {
  display: flex;
  width: max-content;
  gap: clamp(0.6rem, 1.2vw, 1.15rem);
  animation: desliza-izq var(--duracion, 60s) linear infinite;
  /* Clave para el rendimiento: sin esto, el giro del contenedor obliga a
     re-rasterizar una superficie de miles de píxeles en cada fotograma.
     Con will-change cada fila se rasteriza una sola vez y el compositor
     se limita a desplazarla por GPU. */
  will-change: transform;
  backface-visibility: hidden;
}
.marquesina__pista--der { animation-name: desliza-der; }

.marquesina__grupo {
  display: flex;
  gap: clamp(0.6rem, 1.2vw, 1.15rem);
  flex: none;
}

@keyframes desliza-izq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes desliza-der {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.banner__portada {
  flex: none;
  width: clamp(132px, 14vw, 210px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}

/* Velo de marca, en tres capas con papeles distintos:
     1. rampa horizontal — panel oscuro tras el texto que se abre a la derecha
        para que las carátulas se vean de verdad (son el motivo del banner);
     2. baño morado uniforme — unifica portadas de estilos muy dispares;
     3. viñeta vertical — funde el muro con el header y con la sección siguiente. */
.banner__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11, 7, 16, .96) 0%,
      rgba(20, 2, 38, .90) 34%,
      rgba(26, 0, 48, .52) 58%,
      rgba(26, 0, 48, .30) 100%),
    linear-gradient(115deg, rgba(74, 0, 128, .52) 0%, rgba(74, 0, 128, .26) 60%, rgba(90, 30, 140, .20) 100%),
    linear-gradient(180deg, rgba(11, 7, 16, .78) 0%, rgba(11, 7, 16, 0) 26%,
                            rgba(11, 7, 16, 0) 62%, rgba(11, 7, 16, .88) 100%);
}

.banner__contenido {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  padding-block: clamp(4.5rem, 11vh, 8rem);
  color: var(--blanco);
}
.banner__texto { max-width: 860px; }

.banner__sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding: 0.55em 1.15em;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: var(--r-full);
  background: rgba(11, 7, 16, .45);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-300);
}
.banner__sello::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro-400);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .22);
}

.banner__titulo {
  font-size: var(--t-3xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin-bottom: var(--e-4);
  text-shadow: 0 6px 44px rgba(0, 0, 0, .55);
}
.banner__titulo .marca-rancho { display: block; letter-spacing: 0.02em; }

.banner__lema {
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-bottom: var(--e-6);
}

.banner__acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* Línea de nombres reales: refuerza el catálogo y aporta texto indexable */
.banner__artistas {
  margin: var(--e-7) 0 0;
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 70ch;
  font-size: var(--t-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
}
.banner__artistas b {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-400);
}

/* --- Cabecera de página interior (hero pequeño) ------------------------- */
.cabecera-pagina {
  margin-top: var(--header-h);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--negro);
  background-image:
    radial-gradient(ellipse 90% 120% at 20% 0%, rgba(74, 0, 128, .85), transparent 70%),
    radial-gradient(ellipse 60% 90% at 95% 100%, rgba(201, 162, 39, .22), transparent 70%);
  color: var(--blanco);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cabecera-pagina__titulo {
  font-size: var(--t-2xl);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--e-4);
}
.cabecera-pagina .entradilla { margin-inline: auto; text-align: center; }

/* Miga de pan */
.miga {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: var(--e-5);
}
.miga a:hover { color: var(--oro-400); }
.miga li + li::before { content: '/'; margin-right: var(--e-2); opacity: .5; }
.miga li { display: flex; }


/* ============================================================================
   09. SECCIONES Y ENCABEZADOS
   ============================================================================ */

.encabezado-seccion { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.encabezado-seccion--centrado {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.encabezado-seccion--centrado .entradilla { margin-inline: auto; }

.enlace-mas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--morado-700);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--tr-rapida), border-color var(--tr-rapida), gap var(--tr-rapida);
}
.enlace-mas:hover { color: var(--oro-600); border-bottom-color: var(--oro-500); gap: var(--e-3); }
.enlace-mas svg { width: 1em; height: 1em; }
.enlace-mas--claro { color: var(--oro-400); }
.enlace-mas--claro:hover { color: var(--blanco); border-bottom-color: var(--blanco); }


/* ============================================================================
   10. TARJETAS DE ARTISTA  (estilo galería Sony Music)
   ============================================================================ */

.grid-artistas {
  display: grid;
  /* 250px hace que en escritorio ancho caigan 4 columnas: 8 artistas = 2 filas
     limpias, como en la galería de Sony Music. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

.tarjeta-artista {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--morado-900);
  border-radius: var(--r-sm);
  isolation: isolate;
}

.tarjeta-artista__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tr-lenta);
}
.tarjeta-artista:hover .tarjeta-artista__foto { transform: scale(1.07); }

/* Versión sin foto todavía */
.tarjeta-artista__foto.marco-generado { font-size: clamp(1.9rem, 5.5vw, 3.2rem); }

/* Velo morado que aparece en hover */
.tarjeta-artista__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 0, 128, .35) 0%, rgba(74, 0, 128, .82) 100%);
  opacity: 0;
  transition: opacity var(--tr-media);
  display: grid;
  place-items: center;
}
.tarjeta-artista:hover .tarjeta-artista__velo,
.tarjeta-artista:focus-visible .tarjeta-artista__velo { opacity: 1; }

.tarjeta-artista__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.75em 1.5em;
  border: 2px solid var(--oro-400);
  border-radius: var(--r-full);
  background: rgba(11, 7, 16, .35);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(10px);
  transition: transform var(--tr-media);
}
.tarjeta-artista:hover .tarjeta-artista__accion { transform: translateY(0); }

/* Barra inferior semitransparente con el nombre */
.tarjeta-artista__barra {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--e-4) var(--e-4) var(--e-4);
  background: linear-gradient(180deg, rgba(26, 0, 48, 0) 0%, rgba(26, 0, 48, .82) 45%, rgba(11, 7, 16, .94) 100%);
  color: var(--blanco);
}
.tarjeta-artista__nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-base);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.tarjeta-artista__rol {
  display: block;
  margin-top: 3px;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--oro-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Insignias sobre la tarjeta */
.insignia {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 3;
  padding: 0.35em 0.75em;
  border-radius: var(--r-full);
  font-family: var(--fuente-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.insignia--nuevo { background: var(--oro-500); color: var(--negro); }
.insignia--demo {
  right: var(--e-3);
  left: auto;
  background: rgba(11, 7, 16, .72);
  color: var(--oro-300);
  border: 1px solid var(--oro-600);
}

/* --- Filtros de la galería ---------------------------------------------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filtro {
  padding: 0.6em 1.4em;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background: var(--blanco);
  transition: all var(--tr-rapida);
}
.filtro:hover { border-color: var(--morado-500); color: var(--morado-700); }
.filtro[aria-pressed="true"] {
  background: var(--morado-700);
  border-color: var(--morado-700);
  color: var(--blanco);
}

.conteo-resultados {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-bottom: var(--e-5);
}

.vacio {
  text-align: center;
  padding: var(--e-8) var(--e-4);
  color: var(--texto-suave);
}


/* ============================================================================
   11. GRID DE LANZAMIENTOS
   ============================================================================ */

.grid-lanzamientos {
  display: grid;
  /* auto-fit (no auto-fill): con 4 lanzamientos en portada las columnas
     sobrantes se colapsan y las tarjetas ocupan todo el ancho. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

.lanzamiento { display: block; }

.lanzamiento__portada {
  /* Es un <span>: sin display:block, aspect-ratio no tiene efecto y la
     portada colapsa a cero. */
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--morado-900);
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--tr-media), transform var(--tr-media);
}
.lanzamiento:hover .lanzamiento__portada {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}
.lanzamiento__imagen {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lanzamiento__imagen.marco-generado { font-size: clamp(1.7rem, 4.5vw, 2.8rem); }

.lanzamiento__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(74, 0, 128, .55);
  opacity: 0;
  transition: opacity var(--tr-media);
}
.lanzamiento:hover .lanzamiento__play { opacity: 1; }
.lanzamiento__play span {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--r-full);
  background: var(--oro-400);
  color: var(--negro);
  box-shadow: var(--sombra-md);
}
.lanzamiento__play svg { width: 22px; height: 22px; margin-left: 3px; }

/* Cada dato en su propia línea: son <span>, así que hay que forzar el bloque */
.lanzamiento__info { display: block; padding-top: var(--e-4); }
.lanzamiento__titulo {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-base);
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.25;
}
.lanzamiento:hover .lanzamiento__titulo { color: var(--morado-700); }
.lanzamiento__artista {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.4;
}
.lanzamiento__meta {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro-600);
  margin-top: var(--e-2);
}
.seccion--negra .lanzamiento__artista { color: rgba(255, 255, 255, .6); }
.seccion--negra .lanzamiento__meta { color: var(--oro-400); }
.seccion--negra .lanzamiento:hover .lanzamiento__titulo { color: var(--oro-400); }


/* ============================================================================
   12. SERVICIOS
   ============================================================================ */

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

.servicio {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  transition: transform var(--tr-media), box-shadow var(--tr-media),
              border-color var(--tr-media);
  overflow: hidden;
}
.servicio::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--morado-700), var(--oro-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr-media);
}
.servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-lg);
  border-color: transparent;
}
.servicio:hover::before { transform: scaleX(1); }

.servicio__icono {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--e-5);
  border-radius: var(--r-md);
  background: var(--morado-050);
  color: var(--morado-700);
  transition: background var(--tr-media), color var(--tr-media);
}
.servicio:hover .servicio__icono { background: var(--morado-700); color: var(--oro-400); }
.servicio__icono svg { width: 30px; height: 30px; }

.servicio__titulo {
  font-size: var(--t-md);
  font-weight: 800;
  margin-bottom: var(--e-3);
}
.servicio__texto { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }

.servicio__numero {
  position: absolute;
  top: var(--e-5); right: var(--e-5);
  font-family: var(--fuente-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--gris-100);
  transition: color var(--tr-media);
}
.servicio:hover .servicio__numero { color: var(--oro-100); }

/* Servicio ampliado (página Servicios) */
.servicio-detalle {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--borde);
}
.servicio-detalle:first-of-type { border-top: 0; }

.servicio-detalle__cabecera { position: sticky; top: calc(var(--header-h) + 2rem); }
.servicio-detalle__indice {
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--oro-600);
  margin-bottom: var(--e-3);
}
.servicio-detalle__titulo { font-size: var(--t-xl); margin-bottom: var(--e-4); }

.lista-marcada { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.lista-marcada li {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-sm);
}
.lista-marcada li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  border-radius: 2px;
  background: var(--oro-500);
  transform: rotate(45deg);
}


/* ============================================================================
   13. PÁGINA NOSOTROS
   ============================================================================ */

.bloque-alterno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
.bloque-alterno + .bloque-alterno { border-top: 1px solid var(--borde); }
.bloque-alterno--invertido > *:first-child { order: 2; }

.bloque-alterno__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--morado-900);
  box-shadow: var(--sombra-lg);
}
.bloque-alterno__visual img { width: 100%; height: 100%; object-fit: cover; }

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pilar { padding-top: var(--e-5); border-top: 3px solid var(--oro-500); }
.pilar__titulo {
  font-size: var(--t-md);
  font-weight: 800;
  margin-bottom: var(--e-3);
}
.pilar__texto { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.seccion--morada .pilar__texto,
.seccion--negra .pilar__texto { color: rgba(255, 255, 255, .74); }

/* Cifras destacadas */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-6);
  text-align: center;
}
.cifra__numero {
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-weight: 900;
  color: var(--oro-400);
  line-height: 1;
  display: block;
}
.cifra__etiqueta {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}


/* ============================================================================
   14. PERFIL DE ARTISTA
   ============================================================================ */

.perfil {
  margin-top: var(--header-h);
  background: var(--negro);
  color: var(--blanco);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background-image: radial-gradient(ellipse 80% 100% at 15% 0%, rgba(74, 0, 128, .8), transparent 68%);
}

.perfil__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.perfil__foto {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  background: var(--morado-900);
}
.perfil__imagen { width: 100%; height: 100%; object-fit: cover; }
.perfil__imagen.marco-generado {
  position: relative;
  font-size: clamp(3.2rem, 9vw, 6rem);
}

.perfil__rol {
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-bottom: var(--e-3);
}
.perfil__nombre {
  font-size: var(--t-2xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: var(--e-4);
}
.perfil__bio { color: rgba(255, 255, 255, .8); max-width: 60ch; }

.enlaces-plataforma {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* Estado intermedio: el artista ya está en el catálogo pero su ficha
   todavía no tiene biografía ni enlaces cargados. */
.perfil__pendiente {
  margin-top: var(--e-6);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid var(--oro-500);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .82);
  max-width: 58ch;
}
.perfil__pendiente strong { color: var(--blanco); }

.plataforma {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.7em 1.35em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blanco);
  transition: all var(--tr-rapida);
}
.plataforma svg { width: 18px; height: 18px; }
.plataforma:hover {
  background: var(--blanco);
  color: var(--morado-700);
  border-color: var(--blanco);
  transform: translateY(-2px);
}

/* Fila de discografía */
.discografia { display: grid; gap: 0; }
.disco {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-2);
  border-bottom: 1px solid var(--borde);
  transition: background var(--tr-rapida);
}
.disco:hover { background: var(--gris-100); }
.disco__indice {
  font-family: var(--fuente-display);
  font-weight: 800;
  color: var(--gris-300);
  min-width: 2ch;
}
.disco__titulo { font-family: var(--fuente-display); font-weight: 700; }
.disco__tipo {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--morado-700);
  background: var(--morado-050);
  padding: 0.3em 0.8em;
  border-radius: var(--r-full);
}
.disco__anio { color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* Navegación entre artistas */
.nav-artistas {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-block: var(--e-6);
  border-top: 1px solid var(--borde);
}
.nav-artistas__enlace {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fuente-display);
  font-weight: 700;
  transition: color var(--tr-rapida);
}
.nav-artistas__enlace:hover { color: var(--morado-700); }
.nav-artistas__enlace span {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


/* ============================================================================
   15. MÚSICA / STREAMING
   ============================================================================ */

.marco-spotify {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  background: var(--negro-2);
  min-height: 380px;
}
.marco-spotify iframe { width: 100%; border: 0; display: block; }

.aviso-embed {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  min-height: 380px;
  padding: var(--e-6);
  text-align: center;
  border: 2px dashed var(--oro-600);
  border-radius: var(--r-lg);
  background: var(--negro-2);
  color: rgba(255, 255, 255, .82);
}
/* Sin tamaño explícito, un SVG dentro de un grid centrado se estira a todo el ancho */
.aviso-embed svg { width: 42px; height: 42px; color: var(--oro-400); }
.aviso-embed p { max-width: 46ch; }
.aviso-embed code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: var(--t-sm);
  background: rgba(201, 162, 39, .16);
  color: var(--oro-300);
  padding: 0.2em 0.55em;
  border-radius: var(--r-sm);
}

.plataformas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-4);
}

.plataforma-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  transition: all var(--tr-rapida);
}
.plataforma-tarjeta:hover {
  border-color: var(--morado-700);
  background: var(--morado-050);
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
}
.plataforma-tarjeta svg { width: 26px; height: 26px; color: var(--morado-700); flex: none; }

.tarjeta-info {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--oro-500);
  border-radius: var(--r-md);
  background: var(--crema);
}


/* ============================================================================
   16. FORMULARIO DE CONTACTO
   ============================================================================ */

.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.formulario { display: grid; gap: var(--e-5); }

.campo { display: grid; gap: var(--e-2); }

.campo__etiqueta {
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.campo__etiqueta abbr { color: var(--oro-600); text-decoration: none; }

.campo__control {
  width: 100%;
  padding: 0.9em 1.1em;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--blanco);
  font-size: var(--t-base);
  transition: border-color var(--tr-rapida), box-shadow var(--tr-rapida);
}
.campo__control:focus {
  outline: none;
  border-color: var(--morado-700);
  box-shadow: 0 0 0 4px rgba(74, 0, 128, .12);
}
.campo__control::placeholder { color: var(--gris-300); }
textarea.campo__control { min-height: 160px; resize: vertical; }

select.campo__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6779' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 3rem;
}

.campo__error {
  font-size: var(--t-xs);
  color: #B3261E;
  font-weight: 600;
  min-height: 1em;
}
.campo--invalido .campo__control { border-color: #B3261E; }

/* Honeypot antispam: invisible para personas, visible para bots */
.trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.aviso-form {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
}
.aviso-form--ok { background: #E6F4EA; color: #1E4620; border: 1px solid #A8D5B5; }
.aviso-form--error { background: #FCE8E6; color: #8C1D18; border: 1px solid #F0B4AE; }

/* Panel lateral de datos de contacto */
.panel-contacto {
  background: var(--morado-700);
  background-image: radial-gradient(ellipse 100% 80% at 100% 0%, rgba(122, 63, 181, .8), transparent 70%);
  color: var(--blanco);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--sombra-lg);
}
.dato-contacto {
  display: flex;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.dato-contacto:last-of-type { border-bottom: 0; }
.dato-contacto svg { width: 22px; height: 22px; color: var(--oro-400); flex: none; margin-top: 3px; }
.dato-contacto__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-bottom: 3px;
}
.dato-contacto a:hover { color: var(--oro-300); text-decoration: underline; }

.mapa-marco {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--gris-100);
  min-height: 320px;
}
.mapa-marco iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }


/* ============================================================================
   17. FOOTER
   ============================================================================ */

.footer {
  background: var(--negro);
  background-image: radial-gradient(ellipse 80% 100% at 10% 0%, rgba(42, 0, 73, .95), transparent 65%);
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(3rem, 6vw, 5rem);
  font-size: var(--t-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__marca { max-width: 34ch; }
.footer__marca .logo { margin-bottom: var(--e-4); }
.footer__lema { color: rgba(255, 255, 255, .6); margin-bottom: var(--e-5); }

.footer__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-400);
  margin-bottom: var(--e-4);
}

.footer__lista { display: grid; gap: var(--e-3); }
.footer__lista a { transition: color var(--tr-rapida), padding-left var(--tr-rapida); }
.footer__lista a:hover { color: var(--blanco); padding-left: 4px; }

.redes { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.red {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, .82);
  transition: all var(--tr-rapida);
}
.red:hover {
  background: var(--oro-400);
  border-color: var(--oro-400);
  color: var(--negro);
  transform: translateY(-3px);
}
.red svg { width: 19px; height: 19px; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
}
.footer__legales { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.footer__legales a:hover { color: var(--oro-400); }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  transition: transform var(--tr-rapida), box-shadow var(--tr-rapida);
}
.wa-flotante:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(37, 211, 102, .6); }
.wa-flotante svg { width: 30px; height: 30px; }


/* ============================================================================
   18. AVISO MODO DEMO
   ============================================================================ */

/* Aviso flotante bajo el header: no tapa los controles del carrusel (abajo a
   la izquierda) ni el botón de WhatsApp (abajo a la derecha). */
.aviso-demo {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  top: calc(var(--header-h) + 0.75rem);
  z-index: 95;
  max-width: min(400px, calc(100vw - 2rem));
  background: var(--oro-100);
  border: 1px solid var(--oro-500);
  border-left: 4px solid var(--oro-600);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  color: #4A3A08;
  font-size: var(--t-xs);
  line-height: 1.5;
}
.aviso-demo__interior {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
}
.aviso-demo p { margin: 0; }
.aviso-demo svg { width: 18px; height: 18px; flex: none; color: var(--oro-700); margin-top: 2px; }
.aviso-demo code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: rgba(140, 110, 21, .18);
  padding: 0.15em 0.45em;
  border-radius: var(--r-sm);
}
.aviso-demo__cerrar { margin-left: auto; flex: none; color: var(--oro-700); font-size: 1.4rem; line-height: 1; }


/* ============================================================================
   19. ANIMACIONES
   ============================================================================ */

.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
              transform 700ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--retardo, 0ms);
}
.aparece.esta-visible { opacity: 1; transform: none; }


/* ============================================================================
   20. RESPONSIVE
   ============================================================================ */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__marca { grid-column: 1 / -1; max-width: none; }
  .servicio-detalle { grid-template-columns: 1fr; }
  .servicio-detalle__cabecera { position: static; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }

  /* Menú móvil a pantalla completa */
  .hamburguesa { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--negro);
    background-image: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(74, 0, 128, .7), transparent 70%);
    padding: var(--e-6) clamp(1.25rem, 5vw, 2rem) var(--e-8);
    margin: 0;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--tr-media), visibility var(--tr-media);
  }
  .nav.esta-abierto { transform: translateX(0); visibility: visible; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace {
    padding: var(--e-5) 0;
    font-size: var(--t-md);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav__enlace::after { display: none; }
  .nav__enlace[aria-current="page"] { color: var(--oro-400); }

  .perfil__grid,
  .contacto-grid { grid-template-columns: 1fr; }

  .bloque-alterno--invertido > *:first-child { order: 0; }

  .hero { min-height: 82vh; }
  /* En táctil el carrusel se desliza con el dedo: las flechas sobran */
  .hero__flechas { display: none; }

  .banner { min-height: 88vh; }
  .banner__artistas { line-height: 1.75; }
}

@media (max-width: 640px) {
  .grid-artistas { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .grid-lanzamientos { grid-template-columns: repeat(2, 1fr); }
  .tarjeta-artista__barra { padding: var(--e-3); }
  .tarjeta-artista__rol { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { justify-content: center; text-align: center; }
  /* Etiquetas largas como "Conoce a nuestros artistas" no caben en una línea
     a 390 px: sin esto el botón se sale del contenedor y se corta. */
  .btn {
    white-space: normal;
    text-align: center;
    padding-inline: 1.5em;
    line-height: 1.25;
  }
  .btn--grande { font-size: var(--t-sm); }
  .hero__acciones { width: 100%; }
  .hero__acciones .btn { width: 100%; }
  .banner__acciones { width: 100%; }
  .banner__acciones .btn { width: 100%; }

  /* Dos filas bastan en pantalla estrecha: la tercera solo añadiría peso */
  .banner__mosaico .marquesina:nth-child(3) { display: none; }
  .disco { grid-template-columns: auto 1fr auto; }
  .disco__anio { display: none; }
  .wa-flotante { width: 50px; height: 50px; }
  .wa-flotante svg { width: 26px; height: 26px; }

  /* En móvil el aviso baja al pie para no tapar el título de la página */
  .aviso-demo {
    top: auto;
    bottom: 5rem;
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }
}


/* ============================================================================
   21. ACCESIBILIDAD E IMPRESIÓN
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1; transform: none; }
  .hero__imagen { transform: none; }
  /* El muro de carátulas se queda quieto, pero sigue viéndose completo */
  .marquesina__pista { animation: none !important; transform: translate3d(-12%, 0, 0); }
}

@media print {
  .header, .footer, .wa-flotante, .buscador, .hero__controles, .aviso-demo { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .cabecera-pagina, .perfil { margin-top: 0; color: #000; background: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.75em; word-break: break-all; }
}