/* Artist Studio: presentación adicional. No modifica formularios ni tablas.
 * Se carga después de las hojas originales. Las fotos sólo alcanzan cabeceras
 * verificadas por liberty-multimedia.js. Sin estilos de la muestra autónoma.
 */
.private-zone.private-shell .studio-welcome[data-mm-scene="inicio"] {
  --mm-photo: url("/media/fondos/inicio.webp");
}
.private-zone.private-shell .studio-welcome[data-mm-scene="mi-musica"] {
  --mm-photo: url("/media/fondos/mi-musica.webp");
}
.private-zone.private-shell .studio-welcome[data-mm-scene="perfil"] {
  --mm-photo: url("/media/fondos/perfil.webp");
}
.private-zone.private-shell .studio-welcome[data-mm-scene="splits"] {
  --mm-photo: url("/media/fondos/splits.webp");
}
.private-zone.private-shell .studio-welcome[data-mm-scene="campanas"] {
  --mm-photo: url("/media/fondos/campanas.webp");
}
.private-zone.private-shell .studio-welcome[data-mm-scene="aliados"] {
  --mm-photo: url("/media/fondos/aliados.webp");
}

.private-zone.private-shell .private-page > .studio-welcome[data-mm-scene] {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background-color: #110b0e;
  background-image: var(--mm-photo);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 48px);
  min-height: 240px;
}

/* Restaura la cabecera de bienvenida que la capa film había dejado sin foto.
 * Los hijos de React (título, saludo y acciones) conservan su orden y enlaces.
 */
.private-zone.private-shell .dashboard-page > .studio-welcome[data-mm-scene] {
  min-height: 300px;
  margin-bottom: 24px;
}
.private-zone.private-shell .studio-welcome[data-mm-scene]::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(10 9 11 / 96%) 0%, rgb(10 9 11 / 85%) 48%, rgb(10 9 11 / 35%) 100%);
}
.private-zone.private-shell .studio-welcome[data-mm-scene] > .studio-welcome-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 580px;
}
.private-zone.private-shell .studio-welcome[data-mm-scene] .studio-welcome-actions {
  margin-top: 24px;
}
.private-zone.private-shell .studio-welcome[data-mm-scene] h1 {
  color: #fff;
  font-size: clamp(30px, 3.5vw, 42px);
}
.private-zone.private-shell .studio-welcome[data-mm-scene] .studio-welcome-copy > p {
  color: #eee9ed;
}

/* Wordmark exacto. El texto del enlace y su nombre accesible siguen en React. */
.private-zone.private-shell .private-brand[data-mm-brand] {
  display: block;
  font-size: 0;
  letter-spacing: 0;
}
.private-zone.private-shell .private-brand[data-mm-brand]::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 166px;
  aspect-ratio: 5 / 1;
  /* Encuadra los márgenes negros del PNG original sin alterar ni estirar la marca. */
  background: url("/media/marca/logotipo-original-hq.png") center / 133.333333% auto no-repeat;
  mix-blend-mode: screen;
}
.private-zone.private-shell .private-brand[data-mm-brand] .brand-dot {
  font-size: 0;
}

/* Foto animada: capa decorativa debajo del velo y de los controles. */
.private-zone.private-shell .studio-welcome > .mm-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  pointer-events: none;
}
.private-zone.private-shell .studio-welcome > .mm-background:not([data-mm-playing]) {
  visibility: hidden;
}
.private-zone.private-shell .mm-background-controls {
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.private-zone.private-shell .mm-background-controls button,
.private-zone.private-shell .mm-talent button {
  background: #171117;
  color: #fff;
  border: 1px solid #927953;
}
.private-zone.private-shell .mm-background-controls small {
  color: #eee9ed;
  max-width: 290px;
}

/* Segundo vídeo dentro del espacio de presentación que ya existe. */
.private-zone.private-shell .liberty-film > .mm-talent {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid #61313a;
  margin: 0;
  padding: 14px 24px;
}
.private-zone.private-shell .mm-talent summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  color: #eee9ed;
  cursor: pointer;
  font-weight: 600;
}
.private-zone.private-shell .mm-talent summary::after {
  content: "+";
  margin-left: auto;
  font-size: 24px;
}
.private-zone.private-shell .mm-talent[open] summary::after { content: "−"; }
.private-zone.private-shell .mm-original-seal {
  width: 64px;
  height: auto;
  flex: 0 0 64px;
  object-fit: contain;
  mix-blend-mode: screen;
}
.private-zone.private-shell .mm-talent video {
  width: 100%;
  height: auto;
  max-height: 420px;
  aspect-ratio: 910 / 512;
  object-fit: contain;
  margin-top: 16px;
}
.private-zone.private-shell .mm-media-note {
  color: #d8cfd4;
  font-size: 13px;
  line-height: 1.6;
  margin: 12px 0;
}
.private-zone.private-shell :is(.mm-background-controls, .mm-talent) :is(button, summary):focus-visible {
  outline: 3px solid #C9A86A;
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .private-zone.private-shell .studio-welcome[data-mm-scene="inicio"] { --mm-photo: url("/media/fondos/inicio-movil.webp"); }
  .private-zone.private-shell .studio-welcome[data-mm-scene="mi-musica"] { --mm-photo: url("/media/fondos/mi-musica-movil.webp"); }
  .private-zone.private-shell .studio-welcome[data-mm-scene="perfil"] { --mm-photo: url("/media/fondos/perfil-movil.webp"); }
  .private-zone.private-shell .studio-welcome[data-mm-scene="splits"] { --mm-photo: url("/media/fondos/splits-movil.webp"); }
  .private-zone.private-shell .studio-welcome[data-mm-scene="campanas"] { --mm-photo: url("/media/fondos/campanas-movil.webp"); }
  .private-zone.private-shell .studio-welcome[data-mm-scene="aliados"] { --mm-photo: url("/media/fondos/aliados-movil.webp"); }
  .private-zone.private-shell .private-page > .studio-welcome[data-mm-scene] {
    min-height: 220px;
    padding: 26px 22px;
    border-radius: 14px;
  }
  .private-zone.private-shell .studio-welcome[data-mm-scene]::before {
    background: linear-gradient(90deg, rgb(10 9 11 / 95%), rgb(10 9 11 / 78%));
  }
  .private-zone.private-shell .studio-welcome[data-mm-scene] .studio-welcome-actions { gap: 10px; }
  .private-zone.private-shell .liberty-film > .mm-talent { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .private-zone.private-shell .studio-welcome > .mm-background { display: none; }
}
@media (forced-colors: active) {
  .private-zone.private-shell .private-brand[data-mm-brand] { font-size: 23px; }
  .private-zone.private-shell .private-brand[data-mm-brand]::before { display: none; }
  .private-zone.private-shell .mm-original-seal { mix-blend-mode: normal; }
  .private-zone.private-shell .studio-welcome[data-mm-scene]::before { background: Canvas; }
  .private-zone.private-shell :is(.mm-background-controls, .mm-talent) :is(button, summary):focus-visible { outline-color: Highlight; }
}
