/* Juegos de Gracia (ruta /juegos). Vienen de la sala de juegos de CENCREA; aquí toman las fichas de color del sitio
   (app.css): marino y dorado, y en modo oscuro las mismas piezas con otros tonos. Los mapas son ilustración y
   conservan sus colores. */
.cc-jg {
    --jg-navy: var(--color-navy); --jg-navy-2: var(--color-navy-2);
    /* Lo principal (botones de jugar) va en dorado con letra marina, como en el resto del sitio. */
    --jg-oro: #d4af37; --jg-oro-2: #c49f2a; --jg-sobre-oro: #0f172a;
    --jg-acento: var(--rotulo); --jg-sun: #ead489;
    --jg-crema: color-mix(in srgb, #d4af37 11%, var(--card)); --jg-crema-orilla: color-mix(in srgb, #d4af37 38%, var(--card));
    --jg-ink: var(--foreground); --jg-ink-2: color-mix(in srgb, var(--foreground) 76%, var(--card)); --jg-ink-3: var(--muted-foreground);
    --jg-line: var(--border); --jg-surface: var(--secondary); --jg-card: var(--card);
    --jg-tinta: var(--tinta); --jg-sobre-tinta: var(--sobre-tinta);
    --jg-ok: #17794C; --jg-ok-bg: #E2F3EA; --jg-ok-ink: #0F5435; --jg-mal: #B3232A; --jg-mal-bg: #FBE7E8; --jg-mal-ink: #84191E;
    --jg-titulos: "Poppins", ui-sans-serif, system-ui, sans-serif;
    --jg-sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px -12px rgba(15, 23, 42, .28);
    display: grid; gap: 20px; color: var(--jg-ink); font-size: 16px; line-height: 1.45; scroll-margin-top: 76px;
}
.dark .cc-jg {
    --jg-ok: #3fb67f; --jg-ok-bg: rgba(63, 182, 127, .16); --jg-ok-ink: #9be0bb; --jg-mal: #e5674f; --jg-mal-bg: rgba(229, 103, 79, .16); --jg-mal-ink: #f6b3a5;
    --jg-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
}
.cc-jg [hidden] { display: none !important; }
.cc-jg button { font: inherit; color: inherit; cursor: pointer; }
.cc-jg button:disabled { cursor: default; }
.cc-jg button:focus-visible, .cc-jg input:focus-visible, .cc-jg [tabindex]:focus-visible { outline: 3px solid var(--jg-oro); outline-offset: 2px; }
/* Los títulos reciben el foco al cambiar de pantalla (para lectores de pantalla), sin marco a la vista. */
.cc-jg [tabindex="-1"]:focus-visible { outline: none; }
.cc-jg h2, .cc-jg h3, .cc-jg h4 { margin: 0; font-family: var(--jg-titulos); color: var(--jg-ink); text-wrap: balance; }
.cc-jg p { margin: 0; }
.cc-jg-voz { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-jg-ico { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; }
.cc-jg-ico svg, .cc-jg-arte svg { display: block; width: 100%; height: 100%; }
.cc-jg-ceja { color: var(--jg-acento); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cc-jg-h { margin: 6px 0 -6px !important; font-size: 22px; }
.cc-jg-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 19px; }
.cc-jg-h3 small { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--jg-ink-3); }
.cc-jg-como { color: var(--jg-ink-2); font-size: 15px; }
.cc-jg-espera { padding: 40px; text-align: center; color: var(--jg-ink-3); }
.cc-jg-aviso { display: grid; gap: 12px; justify-items: start; padding: 18px 20px; border: 1px dashed var(--jg-ink-3); border-radius: 14px; background: var(--jg-card); }

/* Botones */
.cc-jg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: 999px; padding: 9px 20px; font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; transition: background .15s, transform .1s; }
.cc-jg-btn:active { transform: scale(.97); }
.cc-jg-btn-1 { background: var(--jg-oro); color: var(--jg-sobre-oro) !important; }
.cc-jg-btn-1:hover { background: var(--jg-oro-2); }
.cc-jg-btn-1:disabled { background: var(--jg-surface); color: var(--jg-ink-3) !important; }
.cc-jg-btn-2 { background: var(--jg-card); border-color: var(--jg-tinta); color: var(--jg-tinta) !important; }
.cc-jg-btn-2:hover { background: var(--jg-surface); }
.cc-jg-btn-3 { background: var(--jg-surface); color: var(--jg-ink-2) !important; padding: 8px 15px; font-size: 14px; }
.cc-jg-btn-3:hover:not(:disabled) { background: var(--muted); }
.cc-jg-btn-3:disabled { opacity: .55; }
/* El botón de pista cuenta el tiempo que falta: ancho fijo para que no brinque al cambiar el texto. */
.cc-jg-sopa-bp { min-width: 172px; font-variant-numeric: tabular-nums; }
.cc-jg-btn-g { padding: 13px 28px; font-size: 17px; }
.cc-jg-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-jg-liga { border: 0; background: none; padding: 4px 2px; color: var(--jg-tinta) !important; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cc-jg-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; background: var(--jg-card); border: 1px solid var(--jg-line); border-radius: 22px; }
.cc-jg-seg button { border: 0; background: none; border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 14px; color: var(--jg-ink-2); }
.cc-jg-seg button[aria-pressed="true"] { background: var(--jg-tinta); color: var(--jg-sobre-tinta); }
.cc-jg-chip { border-radius: 999px; padding: 3px 11px; background: var(--jg-surface); color: var(--jg-ink-2); font-size: 12.5px; font-weight: 700; }
.cc-jg-chip-d1 { background: #E2F3EA; color: #17603F; } .cc-jg-chip-d2 { background: #E3ECFB; color: #1B4A94; }
.cc-jg-chip-d3 { background: #FFF0CC; color: #7A5200; } .cc-jg-chip-d4 { background: #FBE7E8; color: #8E1B21; }

/* Portada */
.cc-jg-semana-zona:empty { display: none; }
.cc-jg-semana { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; padding: 20px 24px; border-radius: 16px; background: var(--jg-crema); border: 1px solid var(--jg-crema-orilla); }
.cc-jg-semana-txt { display: grid; gap: 8px; }
.cc-jg blockquote { margin: 0; padding: 0; border: 0; color: var(--jg-ink); }
.cc-jg-semana blockquote p { font-family: var(--jg-titulos); font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.cc-jg cite { display: block; margin-top: 4px; color: var(--jg-ink-2); font-size: 14px; font-style: normal; font-weight: 700; }
.cc-jg-rasgos { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-jg-rasgos span { border-radius: 999px; padding: 3px 12px; background: var(--jg-card); border: 1px solid var(--jg-crema-orilla); color: var(--jg-ink-2); font-size: 13px; font-weight: 700; }
.cc-jg-semana-btn { display: grid; gap: 8px; }
/* Cuatro juegos: dos y dos en pantalla ancha, uno debajo de otro en teléfono */
.cc-jg-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cc-jg-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; text-align: left; background: var(--jg-card); border: 1px solid var(--jg-line); border-radius: 16px; transition: transform .15s, box-shadow .15s; }
.cc-jg-card:hover { transform: translateY(-3px); box-shadow: var(--jg-sombra); }
.cc-jg-arte { display: block; aspect-ratio: 16 / 9; overflow: hidden; font-family: var(--jg-titulos); }
.cc-jg-cuerpo { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 14px 16px 16px; }
.cc-jg-t { font-family: var(--jg-titulos); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--jg-ink); }
.cc-jg-r { color: var(--jg-ink-2); font-size: 14px; line-height: 1.45; }
.cc-jg-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.cc-jg-modo { display: inline-flex; align-items: center; gap: 5px; color: var(--jg-ink-3); font-size: 12.5px; font-weight: 700; }
.cc-jg-marca { color: var(--jg-ok); font-size: 12.5px; font-weight: 700; }
.cc-jg-jugar { margin-left: auto; border-radius: 999px; padding: 7px 18px; background: var(--jg-oro); color: var(--jg-sobre-oro); font-size: 14px; font-weight: 700; }
.cc-jg-card:hover .cc-jg-jugar { background: var(--jg-oro-2); }

/* Portada: saludo y quién juega (va encima del encabezado marino de la página), y la prédica del domingo */
.cc-jg-hola { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 22px; border-radius: 18px; background: var(--jg-card); border: 1px solid var(--jg-line); box-shadow: 0 24px 60px -28px rgba(15, 23, 42, .5); }
.cc-jg-hola-txt { display: grid; gap: 4px; flex: 1 1 300px; }
.cc-jg-hola h2 { font-size: 24px; line-height: 1.15; }
.cc-jg-hola p { color: var(--jg-ink-2); font-size: 15px; }
.cc-jg-hola-nivel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cc-jg-hola-nivel .cc-jg-rot { min-width: 0; }
.cc-jg-semana-t { font-size: 22px; line-height: 1.15; }
.cc-jg-semana blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.cc-jg-semana-btn .cc-jg-liga { justify-self: center; text-align: center; }
a.cc-jg-franja { color: inherit; text-decoration: none; }

/* Marco de cada juego */
.cc-jg-marco { display: grid; gap: 18px; }
.cc-jg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cc-jg-volver { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--jg-line); border-radius: 999px; background: var(--jg-card); padding: 7px 16px 7px 10px; font-size: 14px; font-weight: 700; color: var(--jg-ink-2) !important; }
.cc-jg-volver:hover { background: var(--jg-surface); }
.cc-jg-cab-t { font-size: 28px; line-height: 1.1; outline: none; }
.cc-jg-cab-nivel { margin-left: auto; border-radius: 999px; padding: 5px 14px; background: var(--jg-tinta); color: var(--jg-sobre-tinta); font-size: 13px; font-weight: 700; }
.cc-jg-zona { display: grid; gap: 18px; min-width: 0; }
.cc-jg-prep { display: grid; gap: 14px; }
.cc-jg-prep-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cc-jg-rot { min-width: 78px; color: var(--jg-ink-2); font-size: 14px; font-weight: 700; }
.cc-jg-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cc-jg-tema { display: grid; align-content: start; gap: 4px; min-height: 86px; padding: 14px 16px; text-align: left; background: var(--jg-card); border: 1px solid var(--jg-line); border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.cc-jg-tema:hover { transform: translateY(-2px); box-shadow: var(--jg-sombra); }
.cc-jg-tema-t { font-family: var(--jg-titulos); font-size: 17.5px; font-weight: 700; line-height: 1.2; color: var(--jg-ink); }
.cc-jg-tema-c { color: var(--jg-ink-3); font-size: 13px; font-weight: 600; }
.cc-jg-tema-m { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--jg-ok); font-size: 12.5px; font-weight: 700; }
.cc-jg-tema-sem { background: var(--jg-navy); border-color: var(--jg-navy); }
.cc-jg-tema-sem .cc-jg-tema-t { color: #fff; }
.cc-jg-tema-sem .cc-jg-tema-c { color: var(--jg-sun); }
.cc-jg-tema-sem .cc-jg-tema-m { color: #9BE0BB; }
.cc-jg-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-jg-reloj { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; border-radius: 999px; padding: 7px 15px; background: var(--jg-tinta); color: var(--jg-sobre-tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-jg-verso { padding: 16px 20px !important; border-left: 5px solid var(--jg-oro) !important; border-radius: 0 14px 14px 0; background: var(--jg-card); }
.cc-jg-verso p { font-family: var(--jg-titulos); font-size: 17px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.cc-jg-verso-g p { font-size: 25px; line-height: 1.3; }

/* Cierre de un juego */
.cc-jg-cierre { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px 24px; padding: 20px 26px; border-radius: 18px; background: var(--jg-crema); border: 1px solid var(--jg-crema-orilla); animation: cc-jg-entra .35s ease-out both; }
.cc-jg-cierre-txt { display: grid; gap: 10px; }
.cc-jg-cierre h3 { font-size: 27px; line-height: 1.1; }
.cc-jg-cierre-cita { color: var(--jg-ink-2); font-size: 15px; font-weight: 600; }
.cc-jg-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cc-jg-datos div { display: grid; gap: 1px; min-width: 96px; padding: 8px 14px; border-radius: 12px; background: var(--jg-card); border: 1px solid var(--jg-crema-orilla); }
.cc-jg-datos dt { color: var(--jg-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cc-jg-datos dd { margin: 0; font-family: var(--jg-titulos); font-size: 19px; font-weight: 700; color: var(--jg-ink); font-variant-numeric: tabular-nums; }
@keyframes cc-jg-entra { from { opacity: 0; transform: translateY(10px); } }

/* Sopa de letras */
.cc-jg-sopa { display: grid; gap: 14px; }
.cc-jg-sopa-fin:empty { display: none; }
.cc-jg-sopa-hoja { display: grid; gap: 14px; }
.cc-jg-sopa-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cc-jg-sopa-titulo h3 { font-size: 22px; }
.cc-jg-solo-papel { display: none; }
.cc-jg-sopa-cuerpo { display: grid; grid-template-columns: minmax(0, 560px) minmax(190px, 1fr); align-items: start; gap: 22px; }
.cc-jg-sopa-tabla { position: relative; display: grid; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--jg-card); box-shadow: 0 0 0 1px var(--jg-line), var(--jg-sombra); font-size: 22px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; }
.cc-jg-sopa-tabla { -webkit-tap-highlight-color: transparent; }
/* Con el dedo o el ratón no hace falta el marco de foco; vuelve en cuanto se usa el teclado. */
.cc-jg-sopa-tabla.cc-jg-sopa-dedo:focus-visible { outline: none; }
.cc-jg-sopa-capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cc-jg-sopa-capa line { stroke-width: .76; stroke-linecap: round; }
.cc-jg-sopa-sel { stroke: var(--jg-oro); stroke-opacity: .9; }
.cc-jg-sopa-ok { stroke-opacity: .78; }
.cc-jg-sopa-c { position: relative; display: grid; place-items: center; font-family: var(--jg-titulos); font-weight: 700; line-height: 1; color: var(--jg-ink); }
.cc-jg-sopa-cur { box-shadow: inset 0 0 0 3px var(--jg-oro); border-radius: 8px; }
.cc-jg-sopa-luz { animation: cc-jg-luz 1.8s ease-out; }
@keyframes cc-jg-luz { 0%, 60% { background: var(--jg-sun); border-radius: 50%; transform: scale(1.18); } 100% { background: transparent; transform: none; } }
.cc-jg-sopa-lado { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--jg-card); border: 1px solid var(--jg-line); }
.cc-jg-sopa-lado h4 { display: flex; justify-content: space-between; gap: 10px; font-size: 17px; }
.cc-jg-sopa-n { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--jg-ink-3); font-variant-numeric: tabular-nums; }
.cc-jg-sopa-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cc-jg-sopa-lista li { display: grid; padding: 4px 0; font-weight: 700; letter-spacing: .02em; }
.cc-jg-sopa-lista li.cc-jg-ya { color: var(--jg-ok); }
.cc-jg-sopa-lista li.cc-jg-ya > span { text-decoration: line-through; text-decoration-thickness: 2px; }
.cc-jg-sopa-pistas { gap: 8px; counter-reset: pista; }
.cc-jg-sopa-pistas li { grid-template-columns: 22px 1fr; column-gap: 4px; font-weight: 500; font-size: 14.5px; letter-spacing: 0; counter-increment: pista; }
.cc-jg-sopa-pistas li::before { content: counter(pista) "."; grid-row: span 2; color: var(--jg-ink-3); font-weight: 700; }
.cc-jg-sopa-pistas li.cc-jg-ya > span { font-weight: 800; text-decoration: none; }
.cc-jg-sopa-pistas li small { grid-column: 2; color: var(--jg-ink-3); font-size: 13px; }

/* Maratón bíblico */
.cc-jg-mt-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cc-jg-mt-dos > section, .cc-jg-mt-reglas { display: grid; align-content: start; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--jg-card); border: 1px solid var(--jg-line); }
.cc-jg-mt-alta { display: flex; gap: 8px; }
.cc-jg-mt-alta input { flex: 1 1 0; min-width: 0; border: 1px solid var(--jg-line); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 15px; color: var(--jg-ink); background: var(--jg-card); }
.cc-jg-mt-rapido { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--jg-ink-3); font-size: 14px; }
.cc-jg-mt-lista, .cc-jg-mt-pos ol, .cc-jg-mt-repaso ul, .cc-jg-mp-repaso ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cc-jg-mt-lista li, .cc-jg-mt-pos li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 999px; background: var(--jg-surface); font-weight: 700; }
.cc-jg-mt-lista li.cc-jg-mt-vacio { padding: 10px 16px; color: var(--jg-ink-3); font-weight: 500; font-size: 14px; }
.cc-jg-mt-ini { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--jg-navy)); color: #fff; font-size: 14px; font-weight: 800; }
.cc-jg-mt-nom { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-jg-mt-quita { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--jg-card); color: var(--jg-ink-2) !important; font-size: 20px; line-height: 1; }
.cc-jg-mt-pasos { display: grid; gap: 4px; margin: 0; padding-left: 22px; color: var(--jg-ink-2); font-size: 15px; }
/* Uno solo o en grupo */
.cc-jg-mt-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cc-jg-mt-modo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 22px 24px; text-align: left; background: var(--jg-card); border: 1px solid var(--jg-line); border-radius: 18px; transition: transform .15s, box-shadow .15s; }
.cc-jg-mt-modo:hover { transform: translateY(-3px); box-shadow: var(--jg-sombra); }
.cc-jg-mt-modo > .cc-jg-ico { box-sizing: content-box; width: 30px; height: 30px; padding: 11px; border-radius: 50%; background: var(--jg-tinta); color: var(--jg-sobre-tinta); }
.cc-jg-mt-modo strong { font-family: var(--jg-titulos); font-size: 25px; line-height: 1.1; color: var(--jg-ink); }
.cc-jg-mt-modo .cc-jg-r { grid-column: 1 / -1; font-size: 15.5px; }
.cc-jg-mt-modo .cc-jg-marca { grid-column: 1 / -1; }
.cc-jg-mt-modo .cc-jg-jugar { grid-column: 1 / -1; justify-self: start; margin: 6px 0 0; }
.cc-jg-mt-modo:hover .cc-jg-jugar { background: var(--jg-oro-2); }
/* Las cuatro opciones (uno solo) */
.cc-jg-mt-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-jg-mt-ops-largas { grid-template-columns: minmax(0, 1fr); }
.cc-jg-mt-op { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px 10px 10px; border: 2px solid var(--jg-line); border-radius: 14px; background: var(--jg-card); text-align: left; font-size: 17px; font-weight: 600; line-height: 1.25; transition: background .12s, border-color .12s; }
.cc-jg-mt-op b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--jg-surface); color: var(--jg-ink-2); font-size: 15px; font-weight: 800; }
.cc-jg-mt-op:hover:not(:disabled) { border-color: var(--jg-navy); background: var(--jg-surface); }
.cc-jg-mt-op:disabled { opacity: .55; }
.cc-jg-mt-op.cc-jg-mt-op-bien { opacity: 1; border-color: var(--jg-ok); background: var(--jg-ok-bg); color: var(--jg-ok-ink) !important; }
.cc-jg-mt-op-bien b { background: var(--jg-ok); color: #fff; }
.cc-jg-mt-op.cc-jg-mt-op-mal { opacity: 1; border-color: var(--jg-mal); background: var(--jg-mal-bg); color: var(--jg-mal-ink) !important; }
.cc-jg-mt-op-mal b { background: var(--jg-mal); color: #fff; }
.cc-jg-mt-fue.cc-jg-mt-fue-bien { background: var(--jg-ok); }
.cc-jg-mt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: start; gap: 18px; }
.cc-jg-mt-pregunta { display: grid; gap: 14px; padding: 22px 26px 24px; border-radius: 18px; background: var(--jg-card); border: 1px solid var(--jg-line); box-shadow: var(--jg-sombra); }
.cc-jg-mt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-jg-mt-num { margin-right: 4px; color: var(--jg-acento); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cc-jg-mt-texto { font-family: var(--jg-titulos); font-size: 31px; font-weight: 700; line-height: 1.16; color: var(--jg-ink); text-wrap: balance; outline: none; }
.cc-jg-mt-resp { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--jg-crema); border: 1px solid var(--jg-crema-orilla); }
.cc-jg-mt-resp p { font-size: 20px; font-weight: 700; line-height: 1.3; }
.cc-jg-mt-pregunta > .cc-jg-btn-2 { justify-self: start; }
.cc-jg-mt-quien { font-size: 16px !important; color: var(--jg-ink-2) !important; }
.cc-jg-mt-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cc-jg-mt-da { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px 8px 8px; border: 2px solid var(--c, var(--jg-ink-3)); border-radius: 999px; background: var(--jg-card); font-weight: 700; text-align: left; line-height: 1.15; transition: background .12s; }
.cc-jg-mt-da:hover { background: var(--jg-surface); }
.cc-jg-mt-nadie { justify-content: center; padding: 8px 14px; border-style: dashed; color: var(--jg-ink-2) !important; }
.cc-jg-mt-otros { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 4px; border-top: 1px solid var(--jg-line); }
.cc-jg-mt-fue { padding: 12px 18px; border-radius: 14px; background: var(--c, var(--jg-navy)); color: #fff; font-family: var(--jg-titulos); font-size: 21px; font-weight: 700; animation: cc-jg-entra .3s ease-out both; }
.cc-jg-mt-fue-o { background: #5F6A8E; }
.cc-jg-mt-reloj { display: flex; align-items: center; gap: 12px; }
.cc-jg-mt-barra { flex: 1 1 0; height: 10px; overflow: hidden; border-radius: 999px; background: var(--jg-surface); }
.cc-jg-mt-barra span { display: block; height: 100%; border-radius: 999px; background: var(--jg-oro); transition: width 1s linear; }
.cc-jg-mt-reloj strong { min-width: 34px; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; }
.cc-jg-mt-reloj-fin strong { color: var(--jg-mal); }
.cc-jg-mt-tabla { display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 18px; background: var(--jg-navy); }
.cc-jg-mt-tabla h3, .cc-jg-mt-tabla h3 small { color: #fff !important; }
.cc-jg-mt-tabla h3 small { opacity: .75; }
.cc-jg-mt-pista { display: grid; gap: 12px; }
.cc-jg-carril { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; color: #fff; }
.cc-jg-carril-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.cc-jg-carril-km { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.cc-jg-carril-via { position: relative; grid-column: 1 / -1; height: 14px; margin: 9px 22px 9px 16px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .5) 2px, transparent 2px) 0 0 / calc(100% / var(--meta)) 100%, rgba(255, 255, 255, .13); }
.cc-jg-carril-via::after { content: ""; position: absolute; right: -14px; top: -8px; width: 12px; height: 30px; border-radius: 2px;
    background: conic-gradient(#fff 25%, #18223a 0 50%, #fff 0 75%, #18223a 0) 0 0 / 12px 12px; }
.cc-jg-corredor { position: absolute; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid #fff; border-radius: 50%; background: var(--c); color: #fff; font-size: 13px; font-weight: 800; transition: left .6s cubic-bezier(.3, 1.3, .5, 1); }
.cc-jg-carril-olvido { margin-top: 4px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .3); color: #C9CFE2; }
.cc-jg-carril-olvido .cc-jg-corredor { border-style: dashed; }
.cc-jg-mt-final { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cc-jg-mt-final > .cc-jg-cierre { grid-column: 1 / -1; }
.cc-jg-mt-pos, .cc-jg-mt-repaso, .cc-jg-mp-repaso { display: grid; align-content: start; gap: 12px; padding: 18px 20px; border-radius: 14px; background: var(--jg-card); border: 1px solid var(--jg-line); }
.cc-jg-mt-pos li strong { margin-right: 8px; font-variant-numeric: tabular-nums; }
.cc-jg-mt-pos-o { color: var(--jg-ink-3); }
.cc-jg-mt-repaso li, .cc-jg-mp-repaso li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--jg-line); font-size: 15px; }
.cc-jg-mt-repaso li span, .cc-jg-mp-repaso li span { color: var(--jg-ink-2); }

/* ¿Dónde sucedió? */
.cc-jg-mp-mapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cc-jg-mp-carta { display: grid; align-content: start; gap: 4px; padding: 0 0 14px; overflow: hidden; text-align: left; background: var(--jg-card); border: 1px solid var(--jg-line); border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.cc-jg-mp-carta:hover { transform: translateY(-2px); box-shadow: var(--jg-sombra); }
.cc-jg-mp-carta > span:not(.cc-jg-mp-mini) { padding: 0 16px; }
.cc-jg-mp-mini { position: relative; display: block; height: 150px; margin-bottom: 8px; overflow: hidden; background: linear-gradient(165deg, #A9D0F2 0%, #7FB5E6 48%, #5E9BD8 100%); }
.cc-jg-mp-mini svg { position: relative; display: block; width: 100%; height: 100%; }
.cc-jg-mp { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; gap: 18px; }
.cc-jg-mp-ficha { display: grid; gap: 10px; padding: 20px 22px 22px; border-radius: 18px; background: var(--jg-card); border: 1px solid var(--jg-line); box-shadow: var(--jg-sombra); }
.cc-jg-mp-arriba { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; color: var(--jg-ink-3); }
.cc-jg-mp-pts { color: var(--jg-ok); font-variant-numeric: tabular-nums; }
.cc-jg-mp-cita { font-size: 27px !important; line-height: 1.1; outline: none; }
.cc-jg-mp-texto { font-size: 17px; line-height: 1.5; color: var(--jg-ink); }
.cc-jg-mp-aviso { padding: 10px 14px; border-radius: 12px; background: var(--jg-surface); color: var(--jg-ink-2); font-size: 15px; font-weight: 600; }
.cc-jg-mp-aviso-bien { background: var(--jg-ok-bg); color: var(--jg-ok-ink); }
.cc-jg-mp-aviso-mal { background: var(--jg-mal-bg); color: var(--jg-mal-ink); }
.cc-jg-mp-ficha .cc-jg-btn { justify-self: start; }
.cc-jg-mp-marco { display: grid; justify-items: center; min-width: 0; }
.cc-jg-mp-ficha { position: sticky; top: 76px; }
.cc-jg-mp-lienzo { position: relative; width: min(100%, calc(max(430px, 100vh - 215px) * var(--prop, 1))); min-width: min(100%, 300px); overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px #3F6FB0, var(--jg-sombra); background: linear-gradient(165deg, #A9D0F2 0%, #7FB5E6 48%, #5E9BD8 100%); }
.cc-jg-mp-libre { cursor: crosshair; }
.cc-jg-mp-lienzo > svg { position: relative; display: block; width: 100%; height: 100%; }
/* El mar: fondo azul con olitas que se deslizan (van detrás del dibujo, así moverlas no cuesta) */
.cc-jg-mp-olas { position: absolute; inset: 0 -64px 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='34'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath stroke-opacity='.62' d='M3 10q5.5-6 11 0t11 0'/%3E%3Cpath stroke-opacity='.4' d='M36 27q5.5-6 11 0t11 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 34px; animation: cc-jg-olas 9s linear infinite; }
.cc-jg-mp-quietas { animation: none; }
@keyframes cc-jg-olas { to { transform: translateX(-64px); } }
/* La costa: tres franjas de agua clara, cada vez más tenues, alrededor de la tierra */
.cc-jg-mp-costa { fill: none; stroke-linejoin: round; }
.cc-jg-mp-costa1 { stroke: #fff; stroke-opacity: .7; stroke-width: 5; }
.cc-jg-mp-costa2 { stroke: #E6F2FD; stroke-opacity: .45; stroke-width: 13; }
.cc-jg-mp-costa3 { stroke: #D3E8FB; stroke-opacity: .32; stroke-width: 24; }
.cc-jg-mp-tierra { fill: #F5E7C4; stroke: #A98B55; stroke-width: 1.1; stroke-linejoin: round; }
.cc-jg-mp-orilla { fill: none; stroke: #C7A568; stroke-opacity: .38; stroke-width: 12; stroke-linejoin: round; }
.cc-jg-mp-arena { fill: none; stroke: #BF9F62; stroke-opacity: .75; stroke-width: 1.5; stroke-linecap: round; }
.cc-jg-mp-relieve { fill: none; stroke: #7C5C2E; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.cc-jg-mp-sombra { fill: #7C5C2E; fill-opacity: .3; }
.cc-jg-mp-lago { fill: #8DBCEA; stroke: #3F7FCB; stroke-width: 1; }
.cc-jg-mp-rio { fill: none; stroke: #3F7FCB; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Adornos: retícula de grados, rosa de los vientos, escala y marco */
.cc-jg-mp-reticula { fill: none; stroke: var(--jg-navy); stroke-opacity: .13; stroke-width: 1; stroke-dasharray: 3 6; }
.cc-jg-mp-grados text, .cc-jg-mp-escala text, .cc-jg-mp-rosa text { font-family: var(--jg-titulos); font-weight: 700; fill: var(--jg-navy); }
.cc-jg-mp-grados text { font-size: 10px; fill-opacity: .5; }
.cc-jg-mp-rosa circle { fill: none; stroke: var(--jg-navy); stroke-opacity: .55; stroke-width: 1.2; }
.cc-jg-mp-rosa circle + circle { stroke-opacity: .3; stroke-dasharray: 2 3; }
.cc-jg-mp-rosa-a { fill: var(--jg-navy); } .cc-jg-mp-rosa-b { fill: #fff; stroke: var(--jg-navy); stroke-width: .8; }
.cc-jg-mp-rosa-c { fill: var(--jg-oro); stroke: #fff; stroke-width: .6; }
.cc-jg-mp-rosa text { font-size: 15px; text-anchor: middle; }
.cc-jg-mp-esc-a { fill: #fff; stroke: var(--jg-navy); stroke-width: 1; } .cc-jg-mp-esc-b { fill: var(--jg-navy); }
.cc-jg-mp-escala text { font-size: 11px; paint-order: stroke; stroke: #F5E7C4; stroke-width: 3px; }
.cc-jg-mp-marco { fill: none; stroke: var(--jg-navy); stroke-opacity: .55; stroke-width: 1.5; }
.cc-jg-mp-raya { stroke: var(--jg-navy); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.cc-jg-mp-capa { position: absolute; inset: 0; }
.cc-jg-mp-rot { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-style: italic; font-weight: 700; color: #1C4A8A; font-size: 12px; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; }
.cc-jg-mp-rot-mar { font-family: var(--jg-titulos); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #123A73; text-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.cc-jg-mp-rot-der { transform: translate(-100%, -50%); }
.cc-jg-mp-rot-izq { transform: translate(0, -50%); }
.cc-jg-mp-rot-region { font-family: var(--jg-titulos); font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: #7C5C2E; text-shadow: 0 0 4px #F5E7C4, 0 0 4px #F5E7C4; }
.cc-jg-mp-punto { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--jg-navy); box-shadow: 0 1px 4px rgba(8, 15, 45, .45); transition: transform .12s; }
.cc-jg-mp-punto::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.cc-jg-mp-punto:hover:not(:disabled) { transform: scale(1.25); background: var(--jg-oro); }
.cc-jg-mp-n { position: absolute; left: 17px; top: 50%; display: none; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 800; color: #0f172a; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff; pointer-events: none; }
.cc-jg-mp-izq .cc-jg-mp-n { left: auto; right: 17px; }
.cc-jg-mp-con .cc-jg-mp-n { display: block; }
.cc-jg-mp-mal { background: #A9B0C4 !important; box-shadow: none; }
.cc-jg-mp-mal .cc-jg-mp-n { color: #5b6577; text-decoration: line-through; }
.cc-jg-mp-bien { z-index: 2; background: var(--jg-ok) !important; transform: scale(1.3); animation: cc-jg-pulso 1.2s ease-out 2; }
.cc-jg-mp-bien .cc-jg-mp-n { font-size: 11px; color: #0F5435; }
@keyframes cc-jg-pulso { from { box-shadow: 0 0 0 0 rgba(23, 121, 76, .55); } to { box-shadow: 0 0 0 18px rgba(23, 121, 76, 0); } }
.cc-jg-mp-toque { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--jg-navy); border-radius: 50%; background: rgba(255, 255, 255, .7); pointer-events: none; }
.cc-jg-mp-final { display: grid; gap: 18px; }
.cc-jg-mp-repaso li.cc-jg-ya strong { color: var(--jg-ok); }

/* Arma el versículo */
.cc-jg-vs { display: grid; gap: 18px; max-width: 860px; }
.cc-jg-vs-leer { justify-items: start; }
.cc-jg-vs-arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.cc-jg-vs-arriba .cc-jg-ceja { font-size: 14px; }
.cc-jg-vs-cuenta { color: var(--jg-ink-3); font-size: 13px; font-weight: 700; }
.cc-jg-vs-verso { min-height: 132px; padding: 22px 26px; border-radius: 18px; background: var(--jg-card); border: 1px solid var(--jg-line); box-shadow: var(--jg-sombra); font-family: var(--jg-titulos); font-size: 25px; font-weight: 600; line-height: 1.75; color: var(--jg-ink); }
.cc-jg-vs-p { white-space: nowrap; }
.cc-jg-vs-orden .cc-jg-vs-p { white-space: normal; }
.cc-jg-vs-hueco { display: inline-block; height: 1.25em; min-width: 3em; vertical-align: -0.22em; border-radius: 8px; border: 2px dashed var(--orilla); background: var(--jg-surface); }
.cc-jg-vs-ahora { border: 2px solid var(--jg-oro); background: var(--jg-crema); animation: cc-jg-late 1.1s ease-in-out infinite alternate; }
@keyframes cc-jg-late { to { background: color-mix(in srgb, #d4af37 32%, var(--card)); } }
.cc-jg-vs-ok { border-radius: 8px; padding: 1px 7px; margin: 0 -3px; background: var(--jg-ok-bg); color: var(--jg-ok-ink); }
.cc-jg-vs-orden .cc-jg-vs-ok { padding: 0; margin: 0; background: none; color: inherit; }
.cc-jg-vs-banco, .cc-jg-vs-citas { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-jg-vs-banco:empty { display: none; }
.cc-jg-vs-ficha { border: 0; border-radius: 12px; padding: 10px 18px; background: var(--jg-tinta); color: var(--jg-sobre-tinta) !important; font-family: var(--jg-titulos); font-size: 19px; font-weight: 700; line-height: 1.2; box-shadow: 0 3px 0 color-mix(in srgb, var(--jg-tinta) 55%, #000); transition: transform .1s; }
.cc-jg-vs-ficha:hover { background: color-mix(in srgb, var(--jg-tinta) 85%, #d4af37); }
.cc-jg-vs-ficha:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jg-tinta) 55%, #000); }
.cc-jg-vs-ficha:disabled { opacity: .35; }
.cc-jg-vs-no { animation: cc-jg-no .45s; }
@keyframes cc-jg-no {
    0% { background: var(--jg-mal); } 25% { background: var(--jg-mal); transform: translateX(-6px); }
    50% { background: var(--jg-mal); transform: translateX(6px); } 75% { background: var(--jg-mal); transform: translateX(-4px); }
}
.cc-jg-vs-pie { display: grid; gap: 12px; }
.cc-jg-vs-pie:empty { display: none; }
.cc-jg-vs-est { font-size: 17px; letter-spacing: .1em; color: var(--jg-acento); }
.cc-jg-tema-sem .cc-jg-vs-est { color: var(--jg-sun); }

@media (max-width: 900px) {
    .cc-jg-mt, .cc-jg-mp, .cc-jg-sopa-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .cc-jg-mp-ficha { position: static; }
    .cc-jg-mp-grados { display: none; }
    /* Uno solo: la pista son dos carriles; va arriba para que el avance se vea sin bajar la pantalla. */
    .cc-jg-mt-solo .cc-jg-mt-tabla { order: -1; padding: 14px 16px 16px; }
    .cc-jg-mp-lienzo { width: min(100%, calc(92vh * var(--prop, 1))); }
    .cc-jg-sopa-lista:not(.cc-jg-sopa-pistas) { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 767px) {
    .cc-jg { gap: 16px; }
    .cc-jg-semana { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .cc-jg-semana blockquote p { font-size: 18px; }
    .cc-jg-semana-btn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-jg-semana-btn .cc-jg-liga { grid-column: 1 / -1; }
    .cc-jg-hola { padding: 18px; }
    .cc-jg-hola h2 { font-size: 21px; }
    .cc-jg-semana-t { font-size: 19px; }
    .cc-jg-rejilla { grid-template-columns: minmax(0, 1fr); }
    .cc-jg-arte { aspect-ratio: 5 / 2; }
    .cc-jg-cab-t { font-size: 23px; }
    .cc-jg-cierre { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .cc-jg-cierre h3 { font-size: 23px; }
    .cc-jg-mt-dos, .cc-jg-mt-final, .cc-jg-mt-modos, .cc-jg-mt-ops { grid-template-columns: minmax(0, 1fr); }
    .cc-jg-mt-pregunta { padding: 18px; }
    .cc-jg-mt-texto { font-size: 24px; }
    .cc-jg-mp-cita { font-size: 23px !important; }
    .cc-jg-vs-verso { padding: 16px 18px; font-size: 20px; }
    .cc-jg-verso-g p { font-size: 20px; }
    .cc-jg-vs-ficha { font-size: 17px; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-jg *, .cc-jg *::before, .cc-jg *::after { animation: none !important; transition: none !important; }
}
/* En papel: solo la sopa (título, tablero limpio y lista), para repartirla en clase. */
@media print {
    body.cc-jg-papel * { visibility: hidden !important; }
    body.cc-jg-papel .cc-jg-sopa-hoja, body.cc-jg-papel .cc-jg-sopa-hoja * { visibility: visible !important; }
    body.cc-jg-papel .cc-jg-sopa-hoja { position: absolute; left: 0; top: 0; width: 100%; padding: 0 8mm; }
    body.cc-jg-papel .cc-jg-sopa-capa { display: none; }
    body.cc-jg-papel .cc-jg-solo-papel { display: inline; margin-left: auto; }
    body.cc-jg-papel .cc-jg-sopa-cuerpo { grid-template-columns: 1fr; }
    body.cc-jg-papel .cc-jg-sopa-tabla { width: 150mm; box-shadow: 0 0 0 1px #000; font-size: 5.6mm !important; }
    body.cc-jg-papel .cc-jg-sopa-lado { border: 0; padding: 0; }
    body.cc-jg-papel .cc-jg-sopa-lista:not(.cc-jg-sopa-pistas) { grid-template-columns: repeat(4, 1fr); }
    body.cc-jg-papel .cc-jg-sopa-lista li { color: #000 !important; }
    body.cc-jg-papel .cc-jg-sopa-lista li > span { text-decoration: none !important; }
}

/* Medallero ------------------------------------------------------------------------------------------------- */
.cc-jg-medalla { display: inline-block; flex: none; width: 34px; height: 42px; }
.cc-jg-medalla svg { display: block; width: 100%; height: 100%; }
.cc-jg-reto { padding: 14px 18px; border-radius: 14px; background: var(--jg-crema); border: 1px solid var(--jg-crema-orilla); color: var(--jg-ink); font-family: var(--jg-titulos); font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
/* La celebración se dibuja encima de toda la página y no estorba los toques. */
.cc-jg-festejo { position: fixed; inset: 0; z-index: 2000; width: 100%; height: 100%; pointer-events: none; }
/* Franja de la portada */
.cc-jg-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 20px; text-align: left; border: 1px solid var(--jg-line); border-radius: 16px; background: var(--jg-card); transition: transform .15s, box-shadow .15s; }
.cc-jg-franja:hover { transform: translateY(-2px); box-shadow: var(--jg-sombra); }
.cc-jg-franja:hover .cc-jg-jugar { background: var(--jg-oro-2); }
.cc-jg-fr-t { display: grid; gap: 1px; flex: 1 1 220px; }
.cc-jg-fr-t strong { font-family: var(--jg-titulos); font-size: 20px; color: var(--jg-ink); }
.cc-jg-fr-t span { color: var(--jg-ink-2); font-size: 14px; }
.cc-jg-fr-cuentas { display: flex; align-items: center; gap: 16px; min-height: 42px; }
.cc-jg-fr-m { display: inline-flex; align-items: center; gap: 5px; }
.cc-jg-fr-m b, .cc-jg-fr-p b { font-family: var(--jg-titulos); font-size: 22px; color: var(--jg-ink); font-variant-numeric: tabular-nums; }
.cc-jg-fr-p { display: inline-flex; align-items: baseline; gap: 6px; padding-left: 16px; border-left: 1px solid var(--jg-line); color: var(--jg-ink-3); font-size: 13px; font-weight: 700; }
.cc-jg-franja .cc-jg-jugar { margin-left: auto; }
/* La medalla en la tarjeta de cierre */
.cc-jg-premio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 60px; padding: 10px 16px; border-radius: 14px; background: var(--jg-card); border: 1px solid var(--jg-crema-orilla); }
.cc-jg-premio:empty { display: none; }
.cc-jg-premio .cc-jg-medalla { width: 44px; height: 55px; }
.cc-jg-premio p { display: grid; gap: 1px; flex: 1 1 200px; }
.cc-jg-premio strong { font-family: var(--jg-titulos); font-size: 20px; color: var(--jg-ink); }
.cc-jg-premio p span { color: var(--jg-ink-2); font-size: 14.5px; }
.cc-jg-medalla-nueva { animation: cc-jg-cae .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes cc-jg-cae { from { opacity: 0; transform: translateY(-46px) rotate(-25deg) scale(.6); } }
/* La pantalla */
.cc-jg-md-hero { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px 36px; padding: 26px 32px; border-radius: 18px; background: var(--jg-navy) radial-gradient(circle at 12% 0%, rgba(212, 175, 55, .22) 0, transparent 55%); color: #fff; }
.cc-jg-md-pts { display: grid; justify-items: center; }
.cc-jg-md-total { font-family: var(--jg-titulos); font-size: 68px; line-height: 1; color: var(--jg-oro); font-variant-numeric: tabular-nums; }
.cc-jg-md-pts span { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #D5DBF0; }
.cc-jg-md-cuenta { display: flex; gap: 22px; }
.cc-jg-md-cuenta div { display: grid; justify-items: center; gap: 2px; animation: cc-jg-cae .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.cc-jg-md-cuenta .cc-jg-medalla { width: 54px; height: 67px; }
.cc-jg-md-cuenta b { font-family: var(--jg-titulos); font-size: 26px; line-height: 1; }
.cc-jg-md-cuenta span { color: #D5DBF0; font-size: 12.5px; font-weight: 700; }
.cc-jg-md-hero blockquote { padding-left: 18px !important; border-left: 3px solid var(--jg-oro) !important; color: #fff; }
.cc-jg-md-hero blockquote p { font-size: 15.5px; line-height: 1.5; color: #E7EBF8; }
.cc-jg-md-hero cite { color: var(--jg-oro); }
.cc-jg-md-bloque { display: grid; gap: 12px; padding: 20px 22px 22px; border-radius: 16px; background: var(--jg-card); border: 1px solid var(--jg-line); }
.cc-jg-md-tabla { display: grid; gap: 6px; }
.cc-jg-md-fila { display: grid; grid-template-columns: minmax(110px, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; }
.cc-jg-md-cab span { color: var(--jg-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.cc-jg-md-cab span:first-child { text-align: left; }
.cc-jg-md-juego { font-family: var(--jg-titulos); font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--jg-ink); }
.cc-jg-md-celda { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--jg-line); border-radius: 12px; background: var(--jg-surface); color: var(--jg-ink-2) !important; font-size: 12.5px; font-weight: 700; transition: background .12s, transform .12s; }
.cc-jg-md-celda:hover { background: var(--jg-crema); transform: translateY(-2px); }
@media (max-width: 900px) {
    .cc-jg-md-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 22px 20px; text-align: center; }
    .cc-jg-md-hero blockquote { padding-left: 0 !important; border-left: 0 !important; text-align: left; }
}
@media (max-width: 767px) {
    .cc-jg-md-total { font-size: 56px; }
    .cc-jg-md-bloque { padding: 16px 14px; }
    .cc-jg-md-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cc-jg-md-fila > :first-child { grid-column: 1 / -1; }
    .cc-jg-md-cab > :first-child { display: none; }
    .cc-jg-md-celda { font-size: 11.5px; }
    .cc-jg-franja .cc-jg-jugar { margin-left: 0; }
    .cc-jg-reto { font-size: 16px; }
}

/* Gracia Kids: los mismos juegos con letra redondeada y colores vivos. Es zona de marca: igual en claro y en oscuro. */
.cc-jg.cc-jg-kids, .dark .cc-jg.cc-jg-kids {
    --jg-navy: #5a3ed6; --jg-navy-2: #7b5cfa;
    --jg-oro: #ffc93c; --jg-oro-2: #e0a400; --jg-sobre-oro: #1d2142; --jg-acento: #5a3ed6;
    --jg-crema: #fff1cc; --jg-crema-orilla: #ffd978;
    --jg-ink: #1d2142; --jg-ink-2: #3b4066; --jg-ink-3: #4a4f72;
    --jg-line: #eadfc6; --jg-surface: #fff6e5; --jg-card: #ffffff; --jg-tinta: #1d2142; --jg-sobre-tinta: #ffffff;
    --jg-ok: #17794C; --jg-ok-bg: #E2F3EA; --jg-ok-ink: #0F5435; --jg-mal: #B3232A; --jg-mal-bg: #FBE7E8; --jg-mal-ink: #84191E;
    --jg-titulos: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
    --jg-sombra: 0 6px 0 #eadfc6;
    font-family: "Nunito", ui-rounded, system-ui, sans-serif; color: var(--jg-ink); color-scheme: light;
}
.cc-jg-kids h2, .cc-jg-kids h3, .cc-jg-kids h4 { font-weight: 800; }
.cc-jg-kids .cc-jg-btn { font-weight: 800; box-shadow: 0 4px 0 rgba(29, 33, 66, .18); }
.cc-jg-kids .cc-jg-btn-1 { box-shadow: 0 4px 0 #e0a400; }
.cc-jg-kids .cc-jg-card, .cc-jg-kids .cc-jg-tema, .cc-jg-kids .cc-jg-mt-modo, .cc-jg-kids .cc-jg-mp-carta, .cc-jg-kids .cc-jg-franja,
.cc-jg-kids .cc-jg-md-bloque, .cc-jg-kids .cc-jg-mt-pregunta, .cc-jg-kids .cc-jg-mp-ficha, .cc-jg-kids .cc-jg-vs-verso, .cc-jg-kids .cc-jg-sopa-lado {
    border: 0; border-radius: 24px; box-shadow: 0 6px 0 #eadfc6;
}
.cc-jg-kids .cc-jg-tema-sem { background: #7b5cfa; box-shadow: 0 6px 0 #5a3ed6; }
.cc-jg-kids .cc-jg-tema-sem .cc-jg-tema-c { color: #ffe08a; }
.cc-jg-kids .cc-jg-seg { border: 2px solid #eadfc6; }
.cc-jg-kids .cc-jg-seg button[aria-pressed="true"] { background: #2ec4b6; color: #1d2142; font-weight: 800; }
.cc-jg-kids .cc-jg-cab-nivel { background: #ff6b6b; color: #1d2142; font-weight: 800; }
.cc-jg-kids .cc-jg-volver { border: 0; background: #1d2142; color: #ffffff !important; }
.cc-jg-kids .cc-jg-volver:hover { background: #2b3060; }
.cc-jg-kids .cc-jg-vs-ficha { background: #7b5cfa; box-shadow: 0 4px 0 #5a3ed6; }
.cc-jg-kids .cc-jg-md-hero { background: #4b30c4; }
.cc-jg-kids .cc-jg-mt-tabla { background: #5a3ed6; }

.cc-jg-premio .cc-jg-parche { width: 72px; height: 72px; object-fit: contain; flex: none; }