/* Elenco — La nueva edición (2.ª 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 2.ª edición: el rojo #B34238
   de la portada, el ámbar #DE8C0F de la contraportada, el salmón #F4C8B3 del
   reglamento y la tinta crema #FDF7D4, con el filete dorado #B99A5E; rótulos en
   Limelight, texto en Roboto Slab y la voz mecanografiada de la caja en Courier
   Prime (Google Fonts, cargadas desde la vista). El diseño de referencia es el
   artboard «Elenco — La nueva edición» del canvas de Claude Design, una maqueta
   fija a 1440 px que aquí se hace fluida. */

.ne-page {
    /* Paleta de la edición */
    --ne-rojo: #B34238;
    --ne-rojo-luz: #C75043;
    --ne-crema: #FDF7D4;
    --ne-oro-suave: #FFD886;
    --ne-oro-filete: #B99A5E;
    --ne-apagado: #E6BE9E;
    --ne-apagado-2: #C99A80;
    --ne-ciruela: #3B1520;
    --ne-ambar: #DE8C0F;
    --ne-tinta-ambar: #5C170D;
    --ne-salmon: #F4C8B3;
    --ne-tinta-salmon: #1D130B;
    --ne-rojo-salmon: #B33733;
    /* Colores de la 1.ª edición: SOLO para la banda cruzada */
    --ne-granate-1ed: #4A1819;
    --ne-crema-1ed: #FDF8DB;
    --ne-oro-1ed: #BA834A;
    --ne-oro-linea-1ed: #A47D46;
    --ne-display: Limelight, 'Times New Roman', serif;
    --ne-maquina: 'Courier Prime', 'Courier New', monospace;
    /* Margen lateral: 140px en el diseño a 1440 (140/1440 ≈ 9.7vw) */
    --ne-lateral: clamp(20px, 9.7vw, 140px);

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

/* En esta página el acento de enlace es el oro suave (los oliva son del marco LUDOLI) */
.ne-page a { color: var(--ne-oro-suave); }
.ne-page a:hover { color: #FFE6AE; }

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

/* ── Piezas comunes: marco dorado y hueco de foto pendiente ─────────────────
   El hueco se rotula igual que en el artboard; al soltar el archivo definitivo
   la vista lo sustituye por el marco (filete dorado) sin tocar nada más. */
.ne-marco { border: 1px solid var(--ne-oro-filete); padding: 7px; background: rgba(59, 21, 32, 0.35); }
.ne-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ne-hueco { border: 1px dashed rgba(185, 154, 94, 0.6); padding: 7px; }
.ne-hueco-caja {
    height: 100%;
    background: rgba(59, 21, 32, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    text-align: center;
}
.ne-hueco-rotulo {
    margin: 0;
    color: var(--ne-oro-suave);
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
}
.ne-hueco-nota { margin: 0; color: var(--ne-apagado); font-size: 13px; line-height: 1.55; }

/* ── HÉROE ── el campo rojo de la portada bajo su foco cenital.
   Margen propio del héroe: 110px en el diseño (110/1440 ≈ 7.6vw) */
.ne-heroe {
    background: radial-gradient(128% 76% at 40% -8%, var(--ne-rojo-luz) 0%, var(--ne-rojo) 62%);
    padding: clamp(44px, 5.3vw, 76px) clamp(20px, 7.6vw, 110px) clamp(48px, 5.6vw, 80px);
}
.ne-heroe-grid {
    max-width: 1220px; /* 1440 − 2·110 del diseño */
    display: grid;
    /* La columna de la foto la marca la foto: su alto manda y el ancho sale de --r,
       así el texto se queda con todo lo demás y no hay hueco muerto al lado */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(30px, 3.8vw, 54px);
    align-items: center;
}
.ne-heroe-texto { display: flex; flex-direction: column; gap: 20px; max-width: 566px; }
.ne-eyebrow {
    margin: 0;
    color: var(--ne-oro-suave);
    font-size: 13px;
    letter-spacing: 4.5px;
    font-weight: 700;
    text-transform: uppercase;
}
.ne-heroe h1 {
    margin: 0;
    font-family: var(--ne-display);
    font-weight: 400; /* Limelight solo trae 400 */
    font-size: clamp(40px, 4.7vw, 68px);
    line-height: 1.04;
    letter-spacing: 0.5px;
    color: var(--ne-crema);
}
.ne-maquina {
    margin: 0;
    font-family: var(--ne-maquina);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--ne-oro-suave);
    max-width: 540px;
}
.ne-intro {
    margin: 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.72;
    color: var(--ne-crema);
    max-width: 548px;
}
.ne-cta-fila { display: flex; align-items: center; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.ne-btn-ambar {
    background: var(--ne-ambar);
    color: var(--ne-tinta-ambar);
    padding: 17px 34px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 2px;
    white-space: nowrap;
    text-decoration: none;
}
/* Los botones que son <a> pisan el color de enlace de la página */
.ne-page a.ne-btn-ambar { color: var(--ne-tinta-ambar); }
.ne-page a.ne-btn-ambar:hover { color: var(--ne-tinta-ambar); filter: brightness(1.08); text-decoration: none; }
.ne-btn-linea {
    border: 1px solid rgba(253, 247, 212, 0.55);
    color: var(--ne-crema);
    padding: 16px 30px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.6px;
    border-radius: 2px;
    white-space: nowrap;
    text-decoration: none;
}
.ne-page a.ne-btn-linea { color: var(--ne-crema); }
.ne-page a.ne-btn-linea:hover { color: var(--ne-crema); border-color: var(--ne-crema); text-decoration: none; }
span.ne-btn-linea { opacity: 0.75; }

/* La foto de la caja conserva su proporción (--r, la forma real de la caja): se le fija
   el alto y el ancho lo dicta ella. Estirarle el fondo para cuadrarla se veía forzado. */
.ne-heroe-foto {
    justify-self: end;
    height: clamp(380px, 48vw, 700px);
    width: auto;
    max-width: 100%;
    aspect-ratio: var(--r);
}
.ne-hueco.ne-heroe-foto { padding: 10px; }

/* ── FICHA ── el campo ámbar de la contraportada, con pictogramas y cenefa */
.ne-ficha {
    position: relative;
    background: var(--ne-ambar);
    color: var(--ne-tinta-ambar);
    padding: clamp(32px, 3.1vw, 44px) 0 clamp(30px, 2.8vw, 40px);
    overflow: hidden;
}
.ne-cenefa { position: absolute; top: 32px; height: 226px; width: auto; opacity: 0.7; display: none; }
.ne-cenefa-izq { left: 46px; }
.ne-cenefa-der { right: 46px; }
/* Las cenefas solo caben cuando el campo es ancho de verdad */
@media (min-width: 1240px) { .ne-cenefa { display: block; } }
.ne-ficha-cont {
    position: relative;
    max-width: 1000px; /* 1440 − 2·220 del diseño */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.ne-pictos {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(24px, 3.7vw, 54px);
    flex-wrap: wrap;
}
.ne-pictos img { height: clamp(92px, 9.2vw, 132px); width: auto; display: block; }
.ne-pictos .ne-picto-componentes { height: clamp(89px, 8.9vw, 128px); margin-bottom: 6px; }
.ne-categorias {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    border-top: 1px solid rgba(92, 23, 13, 0.28);
    border-bottom: 1px solid rgba(92, 23, 13, 0.28);
    padding: 13px 0;
    flex-wrap: wrap;
}
.ne-categorias-rotulo {
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: rgba(92, 23, 13, 0.75);
    text-transform: uppercase;
}
.ne-categorias-lista { font-family: var(--ne-maquina); font-size: 16px; color: var(--ne-tinta-ambar); }

/* ── Cabeceras de sección (comunes al salmón y al campo rojo) ── */
.ne-cabecera-seccion { display: flex; align-items: center; gap: 26px; }
.ne-cabecera-seccion h2 {
    margin: 0;
    font-family: var(--ne-display);
    font-weight: 400;
    font-size: clamp(27px, 2.6vw, 38px);
    white-space: nowrap;
    color: var(--ne-crema);
}
.ne-regla { flex: 1; height: 2px; background: rgba(185, 154, 94, 0.6); min-width: 30px; }
.ne-cabecera-salmon h2 { color: var(--ne-rojo-salmon); }
.ne-cabecera-salmon .ne-regla { background: rgba(179, 55, 51, 0.42); }

/* ── UNA FUNCIÓN, CUATRO ACTOS ── el campo salmón del reglamento */
.ne-actos {
    background: var(--ne-salmon);
    color: var(--ne-tinta-salmon);
    padding: clamp(44px, 4.7vw, 68px) var(--ne-lateral) clamp(40px, 3.9vw, 56px);
}
.ne-actos .ne-cont { display: flex; flex-direction: column; gap: clamp(28px, 2.6vw, 38px); }
.ne-actos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ne-acto {
    padding: 0 clamp(18px, 2vw, 30px);
    border-left: 1px solid rgba(29, 19, 11, 0.18);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.ne-acto:first-child { border-left: none; padding-left: 0; }
.ne-acto:last-child { padding-right: 0; }
.ne-acto-num {
    margin: 0;
    font-family: var(--ne-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    color: var(--ne-rojo-salmon);
}
.ne-acto-titulo { margin: 0; font-weight: 700; font-size: 20px; }
.ne-acto-texto { margin: 0; font-size: 15px; line-height: 1.75; color: rgba(29, 19, 11, 0.78); }
/* Los iconos de la nueva iconografía, en línea con el texto */
.ne-ico { height: 17px; width: auto; vertical-align: -3px; }
.ne-ico-g { height: 18px; }
.ne-actos-cierre {
    border-top: 1px solid rgba(29, 19, 11, 0.18);
    padding-top: 30px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.ne-actos-resumen {
    margin: 0;
    font-family: var(--ne-maquina);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    color: var(--ne-tinta-salmon);
    max-width: 820px;
}
.ne-enlace-reglas {
    font-size: 14px;
    font-weight: 700;
    color: var(--ne-rojo-salmon);
    border-bottom: 1px solid rgba(179, 55, 51, 0.5);
    padding-bottom: 2px;
    white-space: nowrap;
    text-decoration: none;
}
.ne-page a.ne-enlace-reglas { color: var(--ne-rojo-salmon); }
.ne-page a.ne-enlace-reglas:hover { color: var(--ne-rojo-salmon); border-color: var(--ne-rojo-salmon); text-decoration: none; }
.ne-enlace-reglas--pendiente { color: rgba(179, 55, 51, 0.65); border-bottom-style: dashed; font-weight: 600; }

/* ── EL CAMPO ROJO LARGO ── con su columna de glifos crema por cada margen,
   densa y repetida, como el lomo de la caja */
.ne-campo { position: relative; overflow: hidden; padding-bottom: clamp(40px, 3.8vw, 54px); }
.ne-glifos {
    position: absolute;
    top: 96px;
    bottom: 40px;
    width: 116px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    overflow: hidden;
}
.ne-glifos-izq { left: 12px; }
.ne-glifos-der { right: 12px; }
.ne-glifos-der img { transform: scaleX(-1); }
.ne-glifos img { opacity: 0.6; }
.ne-g-voluta1 { width: 92px; }
.ne-g-voluta2 { width: 70px; }
.ne-g-mascara1 { width: 76px; }
.ne-g-mascara2 { width: 82px; }
/* Los glifos solo caben en los márgenes anchos de escritorio */
@media (min-width: 1240px) { .ne-glifos { display: flex; } }

.ne-seccion { position: relative; padding: clamp(40px, 4.7vw, 68px) var(--ne-lateral) 0; }
.ne-seccion .ne-cont { display: flex; flex-direction: column; gap: clamp(26px, 2.4vw, 34px); }
.ne-seccion + .ne-seccion { padding-top: clamp(40px, 3.9vw, 56px); }

/* EL NUEVO ARTE: galería justificada de fotos en filete dorado.
   Cada pieza declara su proporción real en --r (la de la foto, sin recortar) y pesa
   en la fila justo eso: repartiendo el ancho sobrante en proporción a --r, todas las
   alturas de la fila salen idénticas —(ancho − huecos) / Σr— sin forzar ningún
   encuadre. Al cambiar de fotos basta con cambiar su --r en la vista. */
.ne-arte-fila { display: flex; gap: clamp(20px, 2.1vw, 30px); }
.ne-arte-pieza { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); }
.ne-arte-fila .ne-hueco { display: flex; flex-direction: column; }
.ne-arte-fila .ne-hueco-caja { flex: 1; }

/* RECURSOS */
.ne-recursos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.1vw, 30px);
}
.ne-recurso {
    display: flex;
    align-items: center;
    gap: 22px;
    border: 1px solid var(--ne-oro-filete);
    background: var(--ne-ciruela);
    padding: 26px 30px;
    color: inherit;
    text-decoration: none;
}
.ne-page a.ne-recurso { color: inherit; }
.ne-page a.ne-recurso:hover { border-color: var(--ne-oro-suave); color: inherit; text-decoration: none; }
.ne-recurso svg { flex-shrink: 0; }
.ne-recurso-texto { display: flex; flex-direction: column; gap: 5px; }
.ne-recurso-titulo { font-weight: 700; font-size: 17px; color: var(--ne-crema); }
.ne-recurso-nota { color: var(--ne-apagado); font-size: 14px; line-height: 1.5; }
/* Los recursos aún sin material: borde discontinuo y tintas apagadas */
.ne-recurso--pendiente { border: 1px dashed rgba(185, 154, 94, 0.55); background: rgba(59, 21, 32, 0.55); }
.ne-recurso--pendiente .ne-recurso-titulo { color: var(--ne-apagado); }
.ne-recurso--pendiente .ne-recurso-nota { color: var(--ne-apagado-2); }

/* BOARD GAME ARENA: sobre el granate de la mesa de la versión digital */
.ne-campo > .ne-cont { padding: 0 var(--ne-lateral); max-width: calc(1160px + 2 * var(--ne-lateral)); }
.ne-bga {
    margin-top: clamp(40px, 3.8vw, 54px);
    background: var(--ne-ciruela);
    border: 1px solid var(--ne-oro-filete);
    padding: clamp(28px, 2.9vw, 42px) clamp(24px, 3.8vw, 54px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}
.ne-bga-texto { display: flex; align-items: center; gap: 24px; }
.ne-bga-texto svg { flex-shrink: 0; }
.ne-bga-lineas { display: flex; flex-direction: column; gap: 6px; }
.ne-bga h2 {
    margin: 0;
    font-family: var(--ne-display);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 29px);
    color: var(--ne-crema);
}
.ne-bga p { margin: 0; color: var(--ne-apagado); font-size: 15px; line-height: 1.6; }
.ne-btn-linea-oro {
    border: 1px solid var(--ne-oro-filete);
    color: var(--ne-oro-suave);
    padding: 14px 28px;
    border-radius: 2px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.6px;
    white-space: nowrap;
    text-decoration: none;
}
.ne-page a.ne-btn-linea-oro { color: var(--ne-oro-suave); }
.ne-page a.ne-btn-linea-oro:hover { color: var(--ne-oro-suave); border-color: var(--ne-oro-suave); text-decoration: none; }

/* ── Banda cruzada a la 1.ª edición: viste sus colores, no los de esta página,
   y va a sangre con su filete de 3 px ── */
.ne-banda1 { margin-top: clamp(40px, 3.8vw, 54px); }
.ne-filete-oro { height: 3px; background: var(--ne-oro-linea-1ed); }
.ne-banda1-int {
    background: var(--ne-granate-1ed);
    padding: clamp(36px, 3.6vw, 52px) var(--ne-lateral);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}
.ne-banda1-texto { display: flex; flex-direction: column; gap: 9px; }
.ne-banda1-eyebrow {
    margin: 0;
    color: var(--ne-oro-1ed);
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
}
.ne-banda1 h2 {
    margin: 4px 0 0;
    font-family: var(--ne-display);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    color: var(--ne-crema-1ed);
}
.ne-banda1-nota { margin: 0; color: #E3D2AA; font-size: 16px; line-height: 1.6; }
.ne-btn-oro {
    background: var(--ne-oro-1ed);
    color: #3A1213;
    padding: 16px 32px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.8px;
    white-space: nowrap;
    text-decoration: none;
}
.ne-page a.ne-btn-oro { color: #3A1213; }
.ne-page a.ne-btn-oro:hover { color: #3A1213; filter: brightness(1.08); text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ne-heroe-grid { grid-template-columns: minmax(0, 1fr); }
    /* Apilada, la foto manda en ancho y su --r decide el alto */
    .ne-heroe-foto { justify-self: center; height: auto; width: min(100%, 380px); }
    /* Los actos pasan a 2×2: cae el filete de la columna impar */
    .ne-actos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .ne-acto:nth-child(odd) { border-left: none; padding-left: 0; }
    .ne-acto:nth-child(even) { padding-right: 0; }
    /* Las fotos, una debajo de otra y cada una con su forma */
    .ne-arte-fila { flex-direction: column; }
    .ne-arte-pieza { flex: none; }
    .ne-recursos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* Los actos, en columna: sin filetes laterales ni sangrados */
    .ne-actos-grid { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
    .ne-acto { border-left: none; padding: 0; }
    .ne-cabecera-seccion { flex-wrap: wrap; }
    .ne-cabecera-seccion h2 { white-space: normal; }
    .ne-cta-fila { gap: 16px; }
    .ne-bga-texto { flex-wrap: wrap; }
}