/* =========================================================
   PÁGINAS INTERNAS DEL CATÁLOGO
   Este archivo comparte la presentación de Música, Videos, Novelas, Cuentos,
   Obras, YouTube y Android. Cada página cambia solamente su color de acento.
   ========================================================= */

/* Fondo general de las páginas internas y color de respaldo. */
.detail-page {
  --detail-accent: var(--farova-naranja);

  background:
    radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--detail-accent) 12%, transparent), transparent 28rem),
    var(--farova-negro);
}

/* Cada modificador conserva la identidad de color utilizada en el catálogo. */
.detail-page--music { --detail-accent: #ff7040; }
.detail-page--video { --detail-accent: #ef3f56; }
.detail-page--novels { --detail-accent: #d5a84d; }
.detail-page--stories { --detail-accent: #3fc3d2; }
.detail-page--works { --detail-accent: #a58bd8; }
.detail-page--youtube { --detail-accent: #ff4f4f; }
.detail-page--apps { --detail-accent: #50d7a0; }

/* Convierte la marca de la cabecera en un enlace limpio hacia la portada. */
.detail-page .header-brand {
  color: var(--farova-marfil);
  text-decoration: none;
}

/*
  Enlace secundario para volver al catálogo sin depender del botón del navegador.
  Las dos clases permiten reutilizarlo tanto en fichas como en páginas de categoría.
*/
.back-link,
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--farova-marfil-suave);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link:hover,
.back-link:focus-visible,
.detail-back:hover,
.detail-back:focus-visible {
  color: var(--detail-accent);
  outline: none;
}

/*
  La presentación interior utiliza dos columnas: información a la izquierda e
  imagen de categoría a la derecha. Su altura es menor que la portada principal.
*/
.detail-hero {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--farova-linea);
}

.detail-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

/*
  Permite que los textos largos reduzcan su ancho dentro de la cuadrícula.
  Sin esta regla, una palabra extensa puede ensanchar toda la página en celular.
*/
.detail-hero__layout > * {
  min-width: 0;
}

/* Etiqueta pequeña que explica al visitante dónde se encuentra. */
.detail-eyebrow {
  margin-bottom: 1.25rem;
  color: var(--detail-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Separa la ubicación de regreso de la etiqueta descriptiva de la categoría. */
.detail-back + .detail-eyebrow {
  margin-top: 1.7rem;
}

/* Título principal de cada categoría. */
.detail-title {
  max-width: 900px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

/* Descripción situada debajo del título con una longitud cómoda de lectura. */
.detail-summary {
  max-width: 680px;
  margin-top: 2rem;
  color: var(--farova-marfil-suave);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

/*
  Marco de la ilustración. La proporción coincide con los archivos originales y
  evita saltos de contenido mientras la imagen termina de cargar.
*/
.detail-hero__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 45%, var(--farova-linea));
  background: #151512;
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--detail-accent) 13%, transparent);
}

/* La imagen ocupa el marco completo sin deformarse y conserva el motivo principal. */
.detail-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
}

/* Degradado muy ligero que conecta la imagen con el fondo oscuro de la página. */
.detail-hero__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(17 16 14 / 18%), transparent 45%);
  content: '';
}

/* La abreviatura funciona como sello de categoría encima de la ilustración. */
.detail-monogram {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 55%, transparent);
  background: rgb(12 12 10 / 80%);
  color: color-mix(in srgb, var(--detail-accent) 75%, var(--farova-marfil));
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  z-index: 1;
}

/* Zona que contiene obras, publicaciones o accesos relacionados. */
.detail-content {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.detail-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--farova-linea);
}

.detail-section-header h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 400;
}

.detail-section-header p {
  max-width: 390px;
  color: var(--farova-marfil-suave);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Cuadrícula de elementos propios de cada categoría. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Esta variante utiliza dos columnas cuando la colección contiene pocas piezas. */
.detail-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
  Franja de plataformas: reúne los accesos oficiales antes del catálogo para
  que el visitante no tenga que buscar dónde escuchar la música.
*/
.catalog-platforms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid var(--farova-linea);
  background: linear-gradient(115deg, color-mix(in srgb, var(--detail-accent) 13%, transparent), transparent 60%), #1b1a17;
}

.catalog-platforms h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  font-weight: 400;
}

.catalog-platforms p {
  max-width: 650px;
  margin-top: 0.65rem;
  color: var(--farova-marfil-suave);
  font-size: 0.82rem;
  line-height: 1.65;
}

.catalog-platforms__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
}

.catalog-platforms__actions .external-button {
  margin-top: 0;
}

/* Cada grupo separa visualmente álbumes y sencillos dentro de Farova Music. */
.release-group + .release-group {
  margin-top: clamp(5rem, 9vw, 8rem);
}

.release-group__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--farova-linea);
}

.release-group__header p {
  color: var(--detail-accent);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.release-group__header h2 {
  margin-top: 0.65rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
}

.release-group__header span {
  max-width: 390px;
  color: var(--farova-marfil-suave);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: right;
}

/* Año y disponibilidad de cada lanzamiento, separados de la descripción. */
.detail-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 1rem;
  color: var(--farova-marfil-suave);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Reproductor oficial de Spotify cargado al final para mantener rápida la página. */
.music-player {
  display: grid;
  grid-template-columns: minmax(240px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(5rem, 9vw, 8rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--farova-linea);
  background: #151512;
}

.music-player h2 {
  margin-top: 0.7rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 400;
  line-height: 1.05;
}

.music-player__frame {
  min-height: 352px;
  overflow: hidden;
  border-radius: 12px;
  background: #0d0d0b;
}

.music-player iframe {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
}

/* Tarjeta de una obra, aplicación o acceso relacionado. */
.detail-item {
  overflow: hidden;
  border: 1px solid var(--farova-linea);
  background: #1b1a17;
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Solo los elementos convertidos en enlaces responden al pasar el cursor. */
a.detail-item:hover,
a.detail-item:focus-visible {
  border-color: var(--detail-accent);
  box-shadow: 0 20px 40px rgb(0 0 0 / 28%);
  outline: none;
  transform: translateY(-4px);
}

/* La variante ancha ocupa dos columnas cuando una pieza necesita más presencia. */
.detail-item--wide {
  grid-column: span 2;
}

/* El marco oscuro conserva completa cada portada aunque tenga otra proporción. */
.detail-item__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0e0e0d;
}

.detail-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-item__copy {
  padding: clamp(1.3rem, 2.5vw, 2rem);
}

.detail-item__type {
  margin-bottom: 0.8rem;
  color: var(--detail-accent);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/*
  El estado informa si una obra ya está publicada o si su lectura todavía se
  prepara. Se separa del tipo de obra para que nadie confunda género y acceso.
*/
.detail-item__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 45%, transparent);
  border-radius: 999px;
  color: var(--farova-marfil);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* El punto de color permite reconocer el estado de un vistazo. */
.detail-item__status::before {
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--detail-accent);
  content: "";
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--detail-accent) 13%, transparent);
}

.detail-item h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.4rem, 2.4vw, 2.3rem);
  font-weight: 400;
  line-height: 1.08;
}

.detail-item__copy > p:last-of-type {
  margin-top: 0.8rem;
  color: var(--farova-marfil-suave);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Texto final que explica el siguiente paso dentro del sitio. */
.detail-item__action {
  display: inline-flex;
  margin-top: 1.3rem;
  color: var(--detail-accent);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Las tarjetas sin portada funcionan como accesos amplios dentro del centro audiovisual. */
.detail-item--text .detail-item__copy {
  display: flex;
  min-height: 290px;
  flex-direction: column;
}

.detail-item--text .detail-item__action {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* Botón externo: aquí sí se sale del sitio hacia Amazon, Spotify o YouTube. */
.external-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 65%, transparent);
  color: var(--farova-marfil);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}

.external-button:hover,
.external-button:focus-visible {
  background: var(--detail-accent);
  color: var(--farova-negro);
  outline: none;
}

/* Panel editorial para categorías que todavía no requieren una portada. */
.detail-panel {
  grid-column: 1 / -1;
  min-height: 280px;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--farova-linea);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--detail-accent) 13%, transparent), transparent 55%),
    #1b1a17;
}

.detail-panel h3 {
  max-width: 700px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
}

.detail-panel p {
  max-width: 650px;
  margin-top: 1.3rem;
  color: var(--farova-marfil-suave);
  line-height: 1.7;
}

/* =========================================================
   GALERÍA DE YOUTUBE
   Estas reglas pertenecen a youtube.html y separan los reproductores de las
   miniaturas enlazadas para evitar una página pesada o visualmente repetitiva.
   ========================================================= */

/* Los tres videos principales se reproducen directamente dentro del sitio. */
.video-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.video-feature {
  overflow: hidden;
  border: 1px solid var(--farova-linea);
  background: #1b1a17;
}

/* aspect-ratio reserva el espacio antes de cargar YouTube y evita saltos. */
.video-player {
  aspect-ratio: 16 / 9;
  background: #0b0b0a;
}

.video-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-feature__copy {
  padding: clamp(1.2rem, 2vw, 1.7rem);
}

.video-feature__copy p,
.video-card__copy p {
  margin-bottom: 0.65rem;
  color: var(--detail-accent);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.video-feature__copy h3,
.video-card__copy h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.12;
}

/* Cabecera de la colección de miniaturas y acceso al canal completo. */
.video-library-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--farova-linea);
}

.video-library-header .detail-eyebrow {
  margin-bottom: 0.9rem;
}

.video-library-header h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 400;
}

.video-library-header .external-button {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Seis miniaturas distribuidas en tres columnas en pantallas grandes. */
.video-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.video-card {
  overflow: hidden;
  border: 1px solid var(--farova-linea);
  background: #1b1a17;
  color: var(--farova-marfil);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

.video-card:hover,
.video-card:focus-visible {
  border-color: var(--detail-accent);
  outline: none;
  transform: translateY(-5px);
}

/* Contenedor de la miniatura y del círculo de reproducción superpuesto. */
.video-card__thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b0b0a;
}

.video-card__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.video-card:hover .video-card__thumbnail img,
.video-card:focus-visible .video-card__thumbnail img {
  transform: scale(1.035);
}

.video-card__thumbnail span {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--detail-accent);
  color: var(--farova-negro);
  font-size: 0.8rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}

.video-card__copy {
  padding: clamp(1.2rem, 2vw, 1.7rem);
}

/*
  Cada colección audiovisual conserva su propio encabezado. Así los videos,
  audiolibros y relatos narrados no aparecen mezclados en una sola cuadrícula.
*/
.media-collection + .media-collection {
  margin-top: clamp(5rem, 9vw, 8rem);
}

.media-collection__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--farova-linea);
}

.media-collection__header p {
  color: var(--detail-accent);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.media-collection__header h2 {
  margin-top: 0.65rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 400;
}

.media-collection__header span {
  max-width: 390px;
  color: var(--farova-marfil-suave);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: right;
}

/* Próximos estrenos informa el estado sin anunciar fechas inexistentes. */
.upcoming-panel {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--farova-linea);
  background: linear-gradient(120deg, color-mix(in srgb, var(--detail-accent) 14%, transparent), transparent 60%), #1b1a17;
}

.upcoming-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--detail-accent);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.upcoming-panel h3 {
  max-width: 760px;
  margin-top: 1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
}

.upcoming-panel > p:last-of-type {
  max-width: 690px;
  margin-top: 1.2rem;
  color: var(--farova-marfil-suave);
  line-height: 1.7;
}

/* En tabletas se reducen las páginas a dos columnas. */
@media (max-width: 900px) {
  .detail-hero__layout {
    grid-template-columns: 1fr;
  }

  /* En tableta la ilustración conserva presencia, pero no supera un ancho cómodo. */
  .detail-hero__visual {
    width: min(100%, 680px);
  }

  .detail-monogram {
    display: none;
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-platforms,
  .music-player {
    grid-template-columns: 1fr;
  }

  .catalog-platforms__actions {
    justify-content: flex-start;
  }

  .detail-item--wide {
    grid-column: span 1;
  }

  /* Reproductores y miniaturas pasan a dos columnas en tableta. */
  .video-feature-grid,
  .video-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* En celulares todo se apila y conserva márgenes cómodos. */
@media (max-width: 600px) {
  /* En celular la sombra es menor para no reducir el margen derecho disponible. */
  .detail-hero__visual {
    aspect-ratio: 16 / 11;
    box-shadow: 9px 9px 0 color-mix(in srgb, var(--detail-accent) 13%, transparent);
  }

  .detail-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .catalog-platforms__actions {
    display: grid;
  }

  .catalog-platforms__actions .external-button {
    width: 100%;
  }

  .release-group__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .release-group__header span {
    text-align: left;
  }

  .media-collection__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-collection__header span {
    text-align: left;
  }

  .detail-title {
    font-size: clamp(2.9rem, 14vw, 5rem);
    text-wrap: balance;
  }

  /* El encabezado del canal y los videos se apilan para pantallas pequeñas. */
  .video-library-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-feature-grid,
  .video-card-grid {
    grid-template-columns: 1fr;
  }
}