/* css/novedades.css — el bloque «Novedades» de la home (13/10/2026). Lo dibuja index.html y lo
   completa js/shared/novedades.js. Tres tarjetas: los duelos de Rankeado (verde del sitio), y el
   censo y el próximo desafío (naranja: es del desafío semanal). Las tarjetas ya están en el HTML
   con su alto: cuando llegan los datos no se mueve nada abajo (CLS).
   15/10 (PF): cuatro tarjetas (.nov-4), un poco más chicas; la segunda es la de las páginas de
   club (.nov-club), con el hilo de la camiseta parado a la izquierda y el color del club. */
.nov-grid { display: grid; gap: 12px; }
@media (min-width: 860px) { .nov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nov-card { min-height: 236px; } }
@media (min-width: 860px) {
    .nov-grid.nov-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .nov-4 .nov-card { min-height: 216px; padding: 14px; gap: 7px; }
    .nov-4 .nov-card h3 { font-size: 1.06rem; }
    .nov-4 .nov-card p { font-size: 13px; }
    .nov-4 .nov-censo li { font-size: 12.5px; min-height: 22px; grid-template-columns: 16px 20px minmax(0, 1fr) auto; }
    .nov-4 .nov-reloj b { font-size: 19px; }
    .nov-4 .nov-jug b { font-size: 22px; }
    .nov-4 .nov-av { width: 32px; height: 32px; font-size: 9.5px; }
    .nov-4 .nov-vs { padding: 8px 10px; gap: 8px; }
    .nov-4 .nov-cta { min-height: 38px; padding: 6px 14px; font-size: 12px; }
    .nov-4 .nov-chips span { font-size: 11px; padding: 2px 8px; }
}
/* En el celular, de costado y deslizando, como los juegos destacados (PF, 13/10): la siguiente
   tarjeta asoma a la derecha para que se note que hay más. */
@media (max-width: 859px) {
    .nov-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scroll-padding-right: 16px;
        padding: 4px 16px 6px; margin: -4px -16px 0; scrollbar-width: none; }
    .nov-grid::-webkit-scrollbar { display: none; }
    .nov-card { flex: 0 0 82%; max-width: 340px; scroll-snap-align: start; padding: 14px; gap: 7px; }
    .nov-card:hover { transform: none; }
    .nov-card h3 { font-size: 1.08rem; }
    .nov-card p { font-size: 13px; }
    .nov-censo li { font-size: 13px; min-height: 22px; }
    .nov-reloj b { font-size: 20px; }
    .nov-cta { margin-top: auto; min-height: 40px; }
}
.nov-card {
    --nov: var(--color-accent);
    --nov-rgb: var(--color-accent-rgb);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(var(--nov-rgb), 0.35);
    background:
        radial-gradient(320px 180px at 100% -10%, rgba(var(--nov-rgb), 0.18), transparent 70%),
        linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
    color: var(--color-text-primary);
    text-decoration: none;
    min-width: 0;
    transition: border-color .15s, transform .15s;
}
.nov-card:hover { border-color: rgba(var(--nov-rgb), 0.7); transform: translateY(-1px); }
.nov-card:focus-visible { outline: 2px solid var(--nov); outline-offset: 2px; }
.nov-desafio { --nov: var(--color-desafio); --nov-rgb: 249, 115, 22; }
.nov-tag { align-self: flex-start; font-family: var(--font-datos); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nov); border: 1px solid rgba(var(--nov-rgb), 0.5); background: rgba(var(--nov-rgb), 0.12); border-radius: 999px; padding: 2px 8px; }
.nov-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.nov-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
/* El botón, igual al «JUGAR» de las tarjetas de la home (PF, 13/10): lleno, texto oscuro en mayúsculas.
   Verde en la de duelos; naranja en las dos del desafío, que es su color. */
.nov-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
    border-radius: var(--radius-button); background: var(--nov); color: var(--color-on-action);
    font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: filter .15s; }
.nov-card:hover .nov-cta { filter: brightness(1.08); }
.nov-censo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nov-censo li { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; min-height: 24px; }
.nov-censo .n { font-family: var(--font-datos); font-size: 12px; color: var(--color-text-muted); text-align: right; }
.nov-censo .e { width: 22px; height: 22px; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--color-text-secondary); }
.nov-censo .e img { width: 22px; height: 22px; object-fit: contain; }
.nov-censo .c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nov-censo .h { font-family: var(--font-datos); font-size: 12.5px; color: var(--color-text-secondary); white-space: nowrap; }
.nov-reloj { display: flex; gap: 6px; }
.nov-reloj div { flex: 1; display: grid; justify-items: center; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); }
.nov-reloj b { font-family: var(--font-datos); font-size: 22px; line-height: 1.25; color: var(--nov); }
.nov-reloj span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
/* La tarjeta de las páginas de club: el hilo de la camiseta (como la franja de la página del club)
   parado a la izquierda. Para todos es el de los dos clubes; novedades.js le pone el de tu club. */
.nov-club { padding-left: 20px; }
.nov-4 .nov-club { padding-left: 18px; }
.nov-hilo { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--franja); background-size: 300px 100%; background-position: center;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    opacity: var(--franja-op, .85); }
.nov-hilo.dos { background: linear-gradient(180deg, #ffffff 0 20%, #d0021b 20% 40%, #ffffff 40% 50%, #1f55c4 50% 70%, #f5c400 70% 85%, #1f55c4 85% 100%); opacity: .8; }
.nov-club h3 em { font-style: normal; }
/* La tarjeta de duelos: un marcador de muestra (vos 31 – 44 rival: gana el que suma menos) y las chapitas. */
.nov-vs { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(var(--nov-rgb), 0.25); background: rgba(0, 0, 0, 0.25); }
.nov-jug { display: flex; align-items: center; gap: 8px; }
.nov-jug b { font-family: var(--font-datos); font-size: 26px; line-height: 1; color: var(--nov); }
.nov-jug.der b { color: var(--color-text-muted); }
.nov-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    color: var(--color-on-action); background: var(--nov); box-shadow: 0 0 0 3px rgba(var(--nov-rgb), 0.2); }
.nov-av.rival { color: var(--color-text-secondary); background: var(--color-surface-elevated); border: 1px solid var(--color-border); box-shadow: none; font-size: 15px; }
.nov-rondas { display: flex; justify-content: center; gap: 5px; }
.nov-rondas i { font-style: normal; font-family: var(--font-datos); font-size: 10.5px; font-weight: 700; padding: 3px 6px; border-radius: 6px; }
.nov-rondas .g { color: var(--nov); background: rgba(var(--nov-rgb), 0.15); border: 1px solid rgba(var(--nov-rgb), 0.45); }
.nov-rondas .p { color: #f87171; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); }
.nov-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nov-chips span { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg); }