/* =========================================================
   FICHA INDIVIDUAL DE UNA CREACIÓN
   Este archivo se comparte entre música, libros, audiolibros y aplicaciones.
   Cada página cambia su color con --work-accent, pero conserva la misma lectura.
   ========================================================= */

.work-page { --work-accent: var(--farova-naranja); background: #11110f; }
.work-page--music { --work-accent: #ff7040; }
.work-page--story { --work-accent: #d5a84d; }
.work-page--audio { --work-accent: #ef3f56; }
.work-page--app { --work-accent: #50d7a0; }

/* Portada principal: imagen a la izquierda y datos a la derecha. */
.work-hero { padding-block: clamp(4rem,8vw,8rem); background: radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--work-accent) 12%,transparent),transparent 30rem); }
.work-hero__layout { display: grid; grid-template-columns: minmax(340px,0.7fr) minmax(0,1fr); align-items: center; gap: clamp(3rem,8vw,9rem); }
/*
  El marco define un cuadro estable. height: 100% impide que los valores de
  tamaño del HTML alarguen la imagen y object-fit conserva la portada completa.
*/
.work-cover { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--farova-linea); background: #090908; box-shadow: 18px 18px 0 color-mix(in srgb,var(--work-accent) 13%,transparent); }
.work-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-back { color: var(--farova-marfil-suave); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; }
.work-back:hover,.work-back:focus-visible { color: var(--work-accent); outline: none; }
.work-type { margin-top: clamp(3rem,7vw,6rem); color: var(--work-accent); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.work-title { max-width: 860px; margin-top: 1rem; font-family: Georgia,'Times New Roman',serif; font-size: clamp(3.4rem,7vw,7rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.92; }
.work-summary { max-width: 680px; margin-top: 1.7rem; color: var(--farova-marfil-suave); font-size: clamp(1rem,1.4vw,1.16rem); line-height: 1.75; }

/*
  Estado editorial: aclara si la obra ya está publicada o si su lectura sigue
  en preparación. No funciona como botón y por eso no crea falsas expectativas.
*/
.work-status { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; padding: 0.48rem 0.7rem; border: 1px solid color-mix(in srgb,var(--work-accent) 45%,transparent); border-radius: 999px; color: var(--farova-marfil); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.work-status::before { width: 0.48rem; aspect-ratio: 1; border-radius: 50%; background: var(--work-accent); content: ""; box-shadow: 0 0 0 4px color-mix(in srgb,var(--work-accent) 13%,transparent); }

/* Datos concretos de la obra presentados como una lista de definición. */
.work-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 2.5rem 0 0; background: var(--farova-linea); }
.work-facts div { min-height: 95px; padding: 1rem; background: #171613; }
.work-facts dt { color: var(--work-accent); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.work-facts dd { margin: 0.55rem 0 0; color: var(--farova-marfil); font-size: 0.82rem; line-height: 1.4; }

/* Los botones externos aparecen solamente cuando existe un enlace real. */
.work-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.work-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 2rem; padding: 0.8rem 1rem; border: 1px solid color-mix(in srgb,var(--work-accent) 65%,transparent); color: var(--farova-marfil); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.13em; text-decoration: none; text-transform: uppercase; }
.work-button:hover,.work-button:focus-visible { background: var(--work-accent); color: var(--farova-negro); outline: none; }

/* Explicación ampliada situada después de la portada. */
.work-about { padding-block: clamp(6rem,10vw,10rem); background: var(--farova-arena); color: var(--farova-negro); }
.work-about__layout { display: grid; grid-template-columns: minmax(160px,0.35fr) minmax(0,1fr); gap: clamp(3rem,8vw,9rem); }
.work-number { color: rgb(21 20 17 / 18%); font-family: Georgia,'Times New Roman',serif; font-size: clamp(5rem,12vw,11rem); line-height: 0.8; }
.work-about__copy > p:first-child { color: var(--farova-naranja); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
.work-about h2 { max-width: 850px; margin-top: 1rem; font-family: Georgia,'Times New Roman',serif; font-size: clamp(2.5rem,5vw,4.8rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.work-about__copy > p:last-child { max-width: 760px; margin-top: 1.7rem; color: #514b42; line-height: 1.8; }

/*
  Panel de disponibilidad: explica con lenguaje sencillo dónde se consigue la
  obra o por qué todavía no aparece un lector. Se muestra después de la reseña.
*/
.work-availability { padding-block: clamp(4.5rem,8vw,7rem); border-bottom: 1px solid var(--farova-linea); background: #171613; }
.work-availability__layout { display: grid; grid-template-columns: minmax(170px,0.34fr) minmax(0,1fr); gap: clamp(2rem,7vw,8rem); align-items: start; }
.work-availability__label { color: var(--work-accent); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.work-availability h2 { max-width: 780px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(2rem,4vw,3.8rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.work-availability__copy > p { max-width: 720px; margin-top: 1.25rem; color: var(--farova-marfil-suave); line-height: 1.75; }
.work-availability__rights { padding-top: 1.2rem; border-top: 1px solid var(--farova-linea); font-size: 0.78rem; }
.work-availability .work-actions { margin-top: 1.7rem; }

/*
  Funciones principales: traduce las capacidades de una aplicación a beneficios
  fáciles de comprender. La cuadrícula también funciona para obras musicales.
*/
.work-features { padding-block: clamp(5rem,9vw,8rem); background: #11110f; }
.work-features__header { display: grid; grid-template-columns: minmax(170px,0.34fr) minmax(0,1fr); gap: clamp(2rem,7vw,8rem); align-items: end; }
.work-features__label { color: var(--work-accent); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.work-features h2 { max-width: 820px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(2.2rem,4.5vw,4.2rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.03; }
.work-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: clamp(2.5rem,5vw,4rem); background: var(--farova-linea); }
.work-feature { min-height: 210px; padding: clamp(1.5rem,3vw,2.4rem); background: #191814; }
.work-feature__number { color: var(--work-accent); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.15em; }
.work-feature h3 { margin-top: 1.4rem; font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 400; }
.work-feature p { max-width: 530px; margin-top: 0.8rem; color: var(--farova-marfil-suave); font-size: 0.84rem; line-height: 1.7; }

/* Nota breve para aclarar el alcance educativo de aplicaciones sensibles. */
.work-disclaimer { max-width: 720px; margin-top: 1.2rem; color: var(--farova-marfil-suave); font-size: 0.76rem; line-height: 1.65; }

/*
  Reproductor musical: conserva la altura recomendada por Spotify y lo separa
  del texto para que el visitante identifique con claridad dónde comienza.
*/
.work-stream { padding-block: clamp(5rem,9vw,8rem); background: #11110f; }
.work-stream__layout { display: grid; grid-template-columns: minmax(190px,0.34fr) minmax(0,1fr); gap: clamp(2rem,7vw,8rem); align-items: start; }
.work-stream__label { color: var(--work-accent); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.work-stream h2 { max-width: 760px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(2rem,4vw,3.8rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.work-stream__frame { margin-top: 2rem; overflow: hidden; border: 1px solid var(--farova-linea); border-radius: 12px; background: #090908; }
.work-stream iframe { display: block; width: 100%; height: 352px; border: 0; }

/* Reproductor individual para audiolibros o videos con permiso de inserción. */
.work-media { padding-block: clamp(5rem,9vw,8rem); background: #11110f; }
.work-media__layout { display: grid; grid-template-columns: minmax(190px,0.34fr) minmax(0,1fr); gap: clamp(2rem,7vw,8rem); align-items: start; }
.work-media__label { color: var(--work-accent); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.work-media h2 { max-width: 760px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(2rem,4vw,3.8rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.work-media__frame { aspect-ratio: 16 / 9; margin-top: 2rem; overflow: hidden; border: 1px solid var(--farova-linea); background: #090908; }
.work-media iframe { display: block; width: 100%; height: 100%; border: 0; }

/*
  CENTRO DE DESCARGA EXTERNA
  Los archivos pesados permanecen en MEGA. La página solo presenta el acceso,
  la contraseña y el código QR, por lo que el sitio conserva un peso reducido.
*/
.work-download {
  padding-block: clamp(5rem,9vw,8rem);
  border-top: 1px solid var(--farova-linea);
  border-bottom: 1px solid var(--farova-linea);
  background:
    radial-gradient(circle at 88% 20%,color-mix(in srgb,var(--work-accent) 14%,transparent),transparent 25rem),
    #151411;
}

/* El encabezado explica primero qué se descarga y dónde está alojado. */
.work-download__header {
  display: grid;
  grid-template-columns: minmax(170px,0.34fr) minmax(0,1fr);
  align-items: end;
  gap: clamp(2rem,7vw,8rem);
}

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

.work-download__header h2 {
  max-width: 820px;
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(2.2rem,4.5vw,4.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.03;
}

/* Dos columnas separan los datos de descarga del QR para evitar amontonarlos. */
.work-download__panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(230px,0.36fr);
  gap: clamp(1.2rem,3vw,2rem);
  margin-top: clamp(2.5rem,5vw,4rem);
}

.work-download__details,
.work-download__qr {
  border: 1px solid var(--farova-linea);
  background: #1b1a17;
}

.work-download__details {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem,4vw,3.2rem);
}

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

.work-download__details > p {
  max-width: 680px;
  margin-top: 1rem;
  color: var(--farova-marfil-suave);
  line-height: 1.75;
}

/* La contraseña se muestra como un dato legible y dispone de un botón para copiarla. */
.work-download__password {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--farova-linea);
}

.work-download__password span {
  color: var(--farova-marfil-suave);
  font-size: 0.67rem;
}

.work-download__password code {
  padding: 0.42rem 0.62rem;
  border: 1px solid color-mix(in srgb,var(--work-accent) 48%,transparent);
  background: #11110f;
  color: var(--farova-marfil);
  font-family: Consolas,'Courier New',monospace;
  font-size: 0.86rem;
}

.work-copy-button {
  min-height: 38px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--farova-linea);
  background: transparent;
  color: var(--farova-marfil);
  cursor: pointer;
  font: inherit;
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-copy-button:hover,
.work-copy-button:focus-visible {
  border-color: var(--work-accent);
  color: var(--work-accent);
  outline: none;
}

.work-download__details .work-actions { margin-top: 1.5rem; }

/* El QR también es un enlace: puede escanearse o abrirse con un clic. */
.work-download__qr {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(1.4rem,3vw,2rem);
  text-align: center;
}

.work-download__qr a {
  display: block;
  width: min(100%,260px);
  padding: 0.75rem;
  border-radius: 16px;
  background: #fff;
}

.work-download__qr img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.work-download__qr figcaption {
  max-width: 270px;
  margin-top: 1rem;
  color: var(--farova-marfil-suave);
  font-size: 0.72rem;
  line-height: 1.55;
}

/*
  RECOMENDACIONES RELACIONADAS
  Esta sección conecta cada ficha con creaciones reales del mismo catálogo.
  No utiliza contenido automático: cada enlace se escribe en su página correspondiente.
*/
.work-related {
  padding-block: clamp(5rem,9vw,8rem);
  border-top: 1px solid var(--farova-linea);
  border-bottom: 1px solid var(--farova-linea);
  background: #0d0d0c;
}

/* El encabezado separa la explicación breve del título principal de la sección. */
.work-related__header {
  display: grid;
  grid-template-columns: minmax(170px,0.34fr) minmax(0,1fr);
  align-items: end;
  gap: clamp(2rem,7vw,8rem);
}

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

.work-related__header h2 {
  max-width: 760px;
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(2.1rem,4vw,3.8rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Dos recomendaciones por fila mantienen las portadas visibles sin amontonarlas. */
.work-related__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1rem,2vw,1.5rem);
  margin-top: clamp(2.5rem,5vw,4rem);
}

/* Las aplicaciones solo tienen una alternativa relacionada por el momento. */
.work-related__grid--single {
  grid-template-columns: minmax(0,620px);
}

/* Cada recomendación reúne su portada y sus datos dentro de un único enlace. */
.work-related__card {
  display: grid;
  grid-template-columns: minmax(120px,0.42fr) minmax(0,1fr);
  min-height: 210px;
  overflow: hidden;
  border: 1px solid var(--farova-linea);
  background: #191814;
  color: var(--farova-marfil);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

.work-related__card:hover,
.work-related__card:focus-visible {
  border-color: var(--work-accent);
  outline: none;
  transform: translateY(-4px);
}

/* object-fit: contain evita recortar títulos que ya forman parte de una portada. */
.work-related__image {
  min-height: 100%;
  background: #080807;
}

.work-related__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 300ms ease;
}

.work-related__card:hover .work-related__image img,
.work-related__card:focus-visible .work-related__image img {
  transform: scale(1.025);
}

.work-related__copy {
  align-self: center;
  padding: clamp(1.25rem,3vw,2.2rem);
}

.work-related__copy p {
  color: var(--work-accent);
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-related__copy h3 {
  margin-top: 0.8rem;
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(1.35rem,2.5vw,2.1rem);
  font-weight: 400;
  line-height: 1.08;
}

.work-related__copy span {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--farova-marfil-suave);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Enlace final para continuar recorriendo la categoría. */
.work-next { padding-block: clamp(4rem,7vw,7rem); text-align: center; }
.work-next p { color: var(--farova-marfil-suave); }
.work-next a { display: inline-block; margin-top: 1.3rem; color: var(--work-accent); font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.8rem,4vw,3.5rem); text-decoration: none; }
.work-next a:hover,.work-next a:focus-visible { color: var(--farova-marfil); outline: none; }

@media (max-width: 900px) {
  .work-hero__layout { grid-template-columns: 1fr; }
  .work-cover { width: min(100%,620px); }
}

@media (max-width: 600px) {
  .work-about__layout,.work-availability__layout,.work-features__header,.work-stream__layout,.work-media__layout,.work-download__header,.work-related__header,.work-facts { grid-template-columns: 1fr; }
  .work-feature-grid { grid-template-columns: 1fr; }
  .work-download__panel { grid-template-columns: 1fr; }
  .work-download__password { align-items: flex-start; flex-direction: column; }
  .work-related__grid { grid-template-columns: 1fr; }
  .work-related__card { grid-template-columns: minmax(105px,0.38fr) minmax(0,1fr); min-height: 170px; }
  .work-number { font-size: 5rem; }
  .work-cover { box-shadow: 10px 10px 0 color-mix(in srgb,var(--work-accent) 13%,transparent); }
  .work-actions { display: grid; }
  .work-button { width: 100%; }
}