/* ===========================================================
   SEMOCORP — sección «Para dormir» (cuentos y nanas)
   Va aparte de estilos.css para no obligar a recargar toda la
   web. Usa las variables de estilos.css.
   =========================================================== */

/* ---------- Vídeo que no carga YouTube hasta que se pulsa ---------- */
.video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: #05070f;
}
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45));
  border: 0; cursor: pointer; color: #fff; font: inherit;
}
.video-play span {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(10, 14, 26, .72); border: 2px solid rgba(255, 255, 255, .85);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; padding-left: 6px; transition: transform .15s, background .15s;
}
.video-play:hover span, .video-play:focus-visible span { transform: scale(1.08); background: #4a68e8; }
.video-pronto {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(10, 14, 26, .82); border: 1px solid var(--borde); border-radius: 999px;
  padding: 8px 18px; font-size: .92rem; font-weight: 600; white-space: nowrap; color: var(--texto);
}
.video-nota { font-size: .85rem; color: var(--texto-suave); margin-top: 10px; }

/* ---------- Tarjetas de vídeo ---------- */
.tarjeta-video { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tarjeta-video .video { border: 0; border-radius: 0; }
.tarjeta-video .cuerpo { padding: 16px 18px 18px; }
.tarjeta-video h3 { margin: 0 0 4px; font-size: 1.05rem; }
.tarjeta-video p { margin: 0; color: var(--texto-suave); font-size: .92rem; }

/* la tarjeta de un cuento lleva su portada a todo el ancho, como los vídeos */
.tarjeta-cuento .proyecto-imagen { background: #05070f; }
.tarjeta-cuento .proyecto-imagen img { width: 100%; border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- El texto del cuento ---------- */
.cuento { max-width: 700px; margin: 0 auto; }
.cuento p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem; line-height: 1.85; color: #e6e9f8; margin: 0 0 22px;
}
.cuento p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: .9; padding: 6px 10px 0 0; color: #ffe7b0;
}
.cuento figure { margin: 34px 0; }
.cuento figure img { border-radius: var(--radio); border: 1px solid var(--borde); }
.cuento figcaption { font-size: .85rem; color: var(--texto-suave); text-align: center; margin-top: 8px; }
.cuento .final { text-align: center; font-style: italic; color: #ffe7b0; }

.personajes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.personajes div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; }
.personajes strong { display: block; margin-bottom: 4px; }
.personajes span { color: var(--texto-suave); font-size: .93rem; }