/* Elenco — Edición Kickstarter (1.ª edición).
   Cada edición del juego viste su propia estética (la cabecera y el pie llevan
   siempre la marca LUDOLI, en site.css). La de la 1.ª edición: granate #4A1819,
   tinta crema #FDF8DB y una sola tinta de acento, el oro #BA834A; rótulos en
   Limelight y texto en Roboto Slab (Google Fonts, cargadas desde la vista).
   El diseño de referencia es el artboard «Elenco — Edición Kickstarter» del
   canvas de Claude Design, una maqueta fija a 1440 px que aquí se hace fluida. */

.ks-page {
    /* Paleta de la edición */
    --ks-granate: #4A1819;
    --ks-granate-oscuro: #3A1213;
    --ks-granate-negro: #26090A;
    --ks-crema: #FDF8DB;
    --ks-crema-suave: #E3D2AA;
    --ks-crema-sinopsis: #E7DEB3;
    --ks-oro: #BA834A;
    --ks-oro-linea: #A47D46;
    --ks-apagado: #A88F63;
    /* Colores de la 2.ª edición: SOLO para la banda cruzada */
    --ks-rojo-2ed: #B34238;
    --ks-ambar-2ed: #DE8C0F;
    --ks-display: Limelight, 'Times New Roman', serif;
    /* Margen lateral: 120px en el diseño a 1440 (120/1440 ≈ 8.3vw) */
    --ks-lateral: clamp(20px, 8.3vw, 120px);

    background: var(--ks-granate);
    color: var(--ks-crema);
    font-family: 'Roboto Slab', Georgia, serif;
}

/* En esta página el único acento es el oro (los enlaces oliva son del marco LUDOLI) */
.ks-page a { color: var(--ks-oro); }
.ks-page a:hover { color: #D9A76B; }

/* Contenedor: reproduce el ancho de contenido del diseño (1200px) y lo centra
   en pantallas más anchas que la maqueta */
.ks-cont { max-width: 1200px; margin: 0 auto; }

/* Cabecera de función a sangre, con filete oro */
.ks-cabecera {
    width: 100%;
    height: clamp(260px, 52.8vw, 760px); /* 760/1440 del diseño */
    object-fit: cover;
    display: block;
}
.ks-filete { height: 3px; background: var(--ks-oro-linea); }

/* Bloque de título, sobre el granate con el foco cenital */
.ks-titulo {
    padding: clamp(44px, 5.1vw, 74px) var(--ks-lateral) clamp(40px, 4.6vw, 66px);
    background: radial-gradient(130% 78% at 42% -8%, #5E2526 0%, #4A1819 64%);
}
.ks-titulo .ks-cont {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(28px, 3.9vw, 56px);
    flex-wrap: wrap;
}
/* En anchos de escritorio la ficha va al lado del título, como en el diseño:
   el texto cede ancho antes que echar la ficha a la fila de abajo */
@media (min-width: 1100px) {
    .ks-titulo .ks-cont { flex-wrap: nowrap; }
    .ks-titulo-texto { flex: 1 1 auto; min-width: 0; }
    .ks-ficha { flex-shrink: 0; }
}
.ks-titulo-texto {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 740px;
}
.ks-eyebrow {
    margin: 0;
    color: var(--ks-oro);
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
}
.ks-titulo h1 {
    margin: 0;
    font-family: var(--ks-display);
    font-weight: 400; /* Limelight solo trae 400 */
    font-size: clamp(38px, 4.6vw, 66px);
    line-height: 1.06;
    letter-spacing: 0.5px;
    color: var(--ks-crema);
}
.ks-intro {
    margin: 0;
    color: var(--ks-crema-suave);
    font-size: clamp(16px, 1.32vw, 19px);
    line-height: 1.75;
}
.ks-cta-fila {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.ks-btn-oro {
    background: var(--ks-oro);
    color: #3A1213;
    padding: 16px 32px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    text-decoration: none;
}
/* Los botones y tarjetas que son <a> pisan el color de enlace de la página
   (.ks-page a tiene más especificidad que una clase suelta) */
.ks-page a.ks-btn-oro { color: #3A1213; }
.ks-page a.ks-btn-oro:hover { color: #3A1213; filter: brightness(1.08); text-decoration: none; }
.ks-enlace { font-size: 15px; font-weight: 500; }

/* Ficha de pictogramas (recortados de la cartelería de la 1.ª edición) */
.ks-ficha {
    border: 1px solid var(--ks-oro-linea);
    border-radius: 10px;
    padding: clamp(16px, 1.7vw, 24px) clamp(20px, 2.4vw, 34px) clamp(15px, 1.6vw, 22px);
    background: rgba(58, 18, 19, 0.45);
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.1vw, 30px);
}
.ks-ficha img { height: clamp(76px, 7.3vw, 104px); width: auto; display: block; }
.ks-ficha-sep { width: 1px; height: clamp(66px, 6.4vw, 92px); background: rgba(164, 125, 70, 0.45); }

/* Sinopsis de la contraportada */
.ks-sinopsis {
    padding: 4px var(--ks-lateral) clamp(36px, 3.2vw, 46px);
}
.ks-sinopsis p {
    margin: 0 auto;
    max-width: 900px;
    text-align: center;
    font-family: var(--ks-display);
    font-weight: 400;
    font-size: clamp(21px, 2.2vw, 31px);
    line-height: 1.45;
    color: var(--ks-crema-sinopsis);
}

/* Secciones de contenido */
.ks-seccion { padding: clamp(32px, 3.2vw, 46px) var(--ks-lateral) 24px; }
.ks-seccion--galeria { padding-top: clamp(20px, 1.8vw, 26px); }
.ks-seccion .ks-cont { display: flex; flex-direction: column; gap: 30px; }

.ks-cabecera-seccion { display: flex; align-items: center; gap: 26px; }
.ks-cabecera-seccion h2 {
    margin: 0;
    font-family: var(--ks-display);
    font-weight: 400;
    font-size: clamp(25px, 2.5vw, 36px);
    color: var(--ks-crema);
    white-space: nowrap;
}
.ks-regla { flex: 1; height: 1px; background: rgba(164, 125, 70, 0.5); min-width: 30px; }
.ks-enlace-canal { font-size: 14px; font-weight: 500; white-space: nowrap; }
span.ks-enlace-canal { color: var(--ks-apagado); }

/* Rótulo pequeño en oro (pies de foto y etiquetas de la tarjeta) */
.ks-rotulito {
    margin: 0;
    color: var(--ks-oro);
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Galería «El juego en la mesa»: rejilla de 12 columnas */
.ks-galeria {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
}
.ks-c3 { grid-column: span 3; }
.ks-c4 { grid-column: span 4; }
.ks-c6 { grid-column: span 6; }
.ks-c8 { grid-column: span 8; }
.ks-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ks-marco { border: 1px solid var(--ks-oro-linea); padding: 6px; background: var(--ks-granate-oscuro); }
.ks-marco img { width: 100%; height: 392px; object-fit: cover; display: block; }
.ks-fig--baja .ks-marco img { height: 320px; }

/* Tarjeta de CONTENIDO / CATEGORÍAS */
.ks-tarjeta {
    border: 1px solid var(--ks-oro-linea);
    background: var(--ks-granate-oscuro);
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}
.ks-tarjeta-bloque { display: flex; flex-direction: column; gap: 9px; }
.ks-tarjeta-bloque p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ks-crema); }
.ks-tarjeta-bloque p.ks-suave { color: var(--ks-crema-suave); }
.ks-tarjeta-sep { height: 1px; background: rgba(164, 125, 70, 0.4); }

/* Tutoriales en vídeo (el material real son 4: una fila de 4 tarjetas en
   escritorio, 2×2 en anchos medios y columna en móvil) */
.ks-videos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 1100px) {
    .ks-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ks-video {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-oro-linea);
    background: var(--ks-granate-oscuro);
    color: inherit;
    text-decoration: none;
}
.ks-page a.ks-video { color: inherit; }
.ks-page a.ks-video:hover { border-color: var(--ks-oro); color: inherit; text-decoration: none; }
.ks-video-thumb {
    position: relative;
    height: 192px;
    background: var(--ks-granate-negro);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(164, 125, 70, 0.45);
    overflow: hidden;
}
.ks-video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta el letterbox del hqdefault de YouTube */
    display: block;
}
/* Velo suave sobre la portada, para que el play oro respire */
.ks-video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 9, 10, 0.28);
    pointer-events: none;
}
a.ks-video:hover .ks-video-thumb::after { background: rgba(38, 9, 10, 0.12); }
.ks-video-play {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.ks-video-play circle { fill: rgba(38, 9, 10, 0.55); }
.ks-video-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 7px; }
.ks-video-titulo { font-weight: 700; font-size: 17px; color: var(--ks-crema); }
.ks-video-nota { color: var(--ks-apagado); font-size: 14px; }

/* Descargas */
.ks-descargas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.ks-descarga {
    display: flex;
    align-items: center;
    gap: 22px;
    border: 1px solid var(--ks-oro-linea);
    background: var(--ks-granate-oscuro);
    padding: 26px 30px;
    color: inherit;
    text-decoration: none;
}
.ks-page a.ks-descarga { color: inherit; }
.ks-page a.ks-descarga:hover { border-color: var(--ks-oro); color: inherit; text-decoration: none; }
.ks-descarga svg { flex-shrink: 0; }
.ks-descarga-texto { display: flex; flex-direction: column; gap: 5px; }
.ks-descarga-titulo { font-weight: 700; font-size: 17px; color: var(--ks-crema); }
.ks-descarga-nota { color: var(--ks-apagado); font-size: 14px; }

/* Banda cruzada a la nueva edición: viste los colores de la 2.ª, no los de esta página */
.ks-banda2 {
    margin: clamp(36px, 3.6vw, 52px) auto 0;
    width: min(1200px, calc(100% - 2 * var(--ks-lateral)));
    background: var(--ks-rojo-2ed);
    padding: clamp(28px, 3vw, 44px) clamp(24px, 3.9vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.ks-banda2-texto { display: flex; flex-direction: column; gap: 8px; }
.ks-banda2 h2 {
    margin: 0;
    font-family: var(--ks-display);
    font-weight: 400;
    font-size: clamp(23px, 2.1vw, 30px);
    color: #FDF7D4;
}
.ks-banda2 p { margin: 0; color: #FCE0C4; font-size: 16px; line-height: 1.6; }
.ks-btn-ambar {
    background: var(--ks-ambar-2ed);
    color: #5C170D;
    padding: 16px 32px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.8px;
    white-space: nowrap;
    text-decoration: none;
}
.ks-page a.ks-btn-ambar { color: #5C170D; }
.ks-page a.ks-btn-ambar:hover { color: #5C170D; filter: brightness(1.08); text-decoration: none; }

/* La banda del público: la multitud del tapete, figuras enteras, sin desvanecer */
.ks-publico {
    width: 100%;
    height: auto;
    display: block;
    margin-top: clamp(40px, 4vw, 60px);
}

/* Responsive */
@media (max-width: 960px) {
    .ks-c6, .ks-c8, .ks-c4 { grid-column: span 12; }
    .ks-c3 { grid-column: span 6; }
    .ks-marco img, .ks-fig--baja .ks-marco img { height: clamp(200px, 42vw, 320px); }
    .ks-descargas { grid-template-columns: minmax(0, 1fr); }
    .ks-cabecera-seccion { flex-wrap: wrap; }
    .ks-cabecera-seccion h2 { white-space: normal; }
}
@media (max-width: 560px) {
    .ks-c3 { grid-column: span 12; }
    .ks-videos { grid-template-columns: minmax(0, 1fr); }
    .ks-marco img, .ks-fig--baja .ks-marco img { height: clamp(180px, 56vw, 300px); }
    .ks-ficha { width: 100%; justify-content: center; }
    .ks-cta-fila { gap: 18px; }
}