/* Otro Capítulo Juegos */
.ocj {
	--ocj-rojo: #b8432f;
	--ocj-rojo-osc: #96331f;
	--ocj-tinta: #1e293b;
	--ocj-gris: #64748b;
	--ocj-linea: #e7ded2;
	--ocj-crema: #faf5ee;
	--ocj-crema-2: #f3eadf;
	--ocj-blanco: #fff;
	--ocj-verde: #2f7d4f;
	--ocj-radio: 14px;
	--ocj-serif: Georgia, "Times New Roman", serif;
	color: var(--ocj-tinta);
	font-size: 16px;
	line-height: 1.5;
	margin: 1.5em 0;
}
.ocj *, .ocj *::before, .ocj *::after { box-sizing: border-box; }
.ocj h2, .ocj h3 { font-family: var(--ocj-serif); color: var(--ocj-tinta); margin: 0; line-height: 1.2; }
.ocj p { margin: 0; }
.ocj img { max-width: 100%; display: block; }

/* Cabecera de cada herramienta */
.ocj-cab { text-align: center; margin: 0 auto 1.4em; max-width: 640px; }
.ocj-cab .ocj-emoji { font-size: 2.6em; display: block; line-height: 1; margin-bottom: .2em; }
.ocj-cab h2 { font-size: clamp(1.6em, 4vw, 2.2em); margin-bottom: .3em; }
.ocj-cab p { color: var(--ocj-gris); font-size: 1.05em; }
.ocj-sub { font-size: 1.25em !important; margin: 1.4em 0 .8em !important; }

/* Botones */
.ocj .ocj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	background: var(--ocj-rojo); color: #fff !important; border: 0; border-radius: 10px;
	padding: .6em 1.05em; font: 600 .95em/1.2 system-ui, sans-serif; text-decoration: none !important;
	cursor: pointer; transition: background .15s, transform .15s;
}
.ocj .ocj-btn:hover { background: var(--ocj-rojo-osc); transform: translateY(-1px); }
.ocj .ocj-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ocj .ocj-btn-2 { background: var(--ocj-tinta); }
.ocj .ocj-btn-2:hover { background: #0f172a; }
.ocj .ocj-btn-3 { background: transparent; color: var(--ocj-tinta) !important; box-shadow: inset 0 0 0 1.5px var(--ocj-linea); }
.ocj .ocj-btn-3:hover { background: var(--ocj-crema); }
.ocj .ocj-btn-grande { font-size: 1.1em; padding: .85em 1.6em; }
.ocj .ocj-precio { background: rgba(255,255,255,.2); border-radius: 6px; padding: .1em .45em; font-size: .9em; }
.ocj .ocj-link { background: none; border: 0; padding: 0; color: var(--ocj-rojo); font-weight: 600; cursor: pointer; text-decoration: none; font-size: .95em; }
.ocj .ocj-link:hover { text-decoration: underline; }
.ocj-acciones { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-top: 1.4em; }

/* Chips de opciones */
.ocj-chips { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin: .8em 0 1em; }
.ocj .ocj-chip {
	display: inline-flex; align-items: center; gap: .45em; background: var(--ocj-blanco);
	border: 1.5px solid var(--ocj-linea); border-radius: 999px; padding: .6em 1.1em;
	font: 500 1em/1.2 system-ui, sans-serif; color: var(--ocj-tinta); cursor: pointer;
	transition: border-color .15s, background .15s, transform .15s;
}
.ocj .ocj-chip:hover { border-color: var(--ocj-rojo); transform: translateY(-1px); }
.ocj .ocj-chip.ocj-on { background: var(--ocj-rojo); border-color: var(--ocj-rojo); color: #fff; }
.ocj-chip-emoji { font-size: 1.2em; }

/* Test */
.ocj-progreso { height: 8px; background: var(--ocj-crema-2); border-radius: 99px; overflow: hidden; max-width: 420px; margin: 0 auto .5em; }
.ocj-progreso span { display: block; height: 100%; background: var(--ocj-rojo); border-radius: 99px; transition: width .3s; }
.ocj-paso { text-align: center; color: var(--ocj-gris); font-size: .9em; }
.ocj-pregunta { text-align: center; font-size: 1.45em !important; margin: .4em 0 .2em !important; }
.ocj-test > .ocj-link { display: block; margin: .5em auto 0; }

/* Formularios */
.ocj-form { background: var(--ocj-crema); border-radius: var(--ocj-radio); padding: 1.4em; text-align: center; }
.ocj-bloque { margin-bottom: 1em; }
.ocj-bloque h3 { font-size: 1.15em; }
.ocj select, .ocj input[type="number"], .ocj input[type="text"], .ocj input[type="search"] {
	font: 1em system-ui, sans-serif; padding: .65em .9em; border: 1.5px solid var(--ocj-linea);
	border-radius: 10px; background: #fff; color: var(--ocj-tinta); max-width: 100%;
}
.ocj select:focus, .ocj input:focus { outline: 2px solid var(--ocj-rojo); outline-offset: 1px; border-color: var(--ocj-rojo); }
.ocj-fila { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; align-items: center; margin-bottom: 1.2em; }

/* Tarjetas de libro */
.ocj-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1em; margin-top: 1em; }
.ocj-libro {
	display: grid; grid-template-columns: 96px 1fr; gap: 1em; align-items: start; background: #fff;
	border: 1px solid var(--ocj-linea); border-radius: var(--ocj-radio); padding: 1em; text-align: left;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ocj-libro-grande { grid-template-columns: 150px 1fr; max-width: 680px; margin: 0 auto; padding: 1.3em; }
.ocj-libro h3 { font-size: 1.08em; margin: .25em 0 .15em; }
.ocj-libro h3 a { color: var(--ocj-tinta); text-decoration: none; }
.ocj-libro h3 a:hover { color: var(--ocj-rojo); }
.ocj-libro-grande h3 { font-size: 1.4em; }
.ocj-autor { color: var(--ocj-gris); font-size: .92em; }
.ocj-motivo { color: var(--ocj-verde); font-size: .85em; font-weight: 600; margin-top: .2em !important; }
.ocj-sinopsis { font-size: .9em; color: #334155; margin: .5em 0 !important; }
.ocj-botones { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em; }
.ocj-botones .ocj-btn { font-size: .82em; padding: .5em .8em; }
.ocj-pill { display: inline-block; background: var(--ocj-crema-2); color: var(--ocj-rojo-osc); border-radius: 99px; padding: .15em .65em; font: 600 .72em/1.6 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.ocj-pill-oscura { background: var(--ocj-tinta); color: #fff; }

/* Portadas */
.ocj-portada { position: relative; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #7a3b2e, #4a2219); box-shadow: 0 6px 14px rgba(15,23,42,.18); }
.ocj-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.ocj-portada.ocj-con-img img { opacity: 1; }
.ocj-portada-falsa { position: absolute; inset: 0; padding: .6em; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff; font-family: var(--ocj-serif); }
.ocj-portada-falsa strong { font-size: .8em; line-height: 1.2; }
.ocj-portada-falsa span { font-size: .6em; opacity: .8; margin-top: .5em; text-transform: uppercase; }
.ocj-libro-img { display: block; }

/* Avisos y estados */
.ocj-aviso { background: var(--ocj-crema); border-left: 4px solid var(--ocj-rojo); padding: .8em 1em; border-radius: 8px; margin: 1em 0 !important; }
.ocj-nota { color: var(--ocj-gris); font-size: .82em; text-align: center; margin-top: 1em !important; }
.ocj-cargando { display: flex; align-items: center; justify-content: center; gap: .6em; color: var(--ocj-gris); padding: 2em 0; }
.ocj-spin { width: 20px; height: 20px; border: 3px solid var(--ocj-linea); border-top-color: var(--ocj-rojo); border-radius: 50%; animation: ocj-giro .8s linear infinite; }
@keyframes ocj-giro { to { transform: rotate(360deg); } }

/* Buscador */
.ocj-buscador { position: relative; max-width: 560px; margin: 0 auto 1em; }
.ocj-buscador input { width: 100%; font-size: 1.05em !important; padding: .8em 1em !important; }
.ocj-sugerencias { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--ocj-linea); border-radius: 12px; list-style: none; margin: 0; padding: .3em; box-shadow: 0 12px 30px rgba(15,23,42,.14); max-height: 360px; overflow: auto; }
.ocj-sugerencias li { display: flex; align-items: center; gap: .7em; padding: .5em .6em; border-radius: 8px; cursor: pointer; margin: 0; }
.ocj-sugerencias li:hover, .ocj-sugerencias li:focus { background: var(--ocj-crema); outline: none; }
.ocj-sugerencias img, .ocj-mini { width: 32px; height: 48px; object-fit: cover; border-radius: 3px; background: var(--ocj-crema-2); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ocj-sugerencias strong { display: block; font-size: .95em; }
.ocj-sugerencias small { color: var(--ocj-gris); }
.ocj-sugerencias .ocj-sin { color: var(--ocj-gris); cursor: default; }

/* Sorpréndeme */
.ocj-dado.ocj-girando { animation: ocj-agitar .6s ease-in-out; }
@keyframes ocj-agitar { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-8deg) scale(1.05); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
.ocj-aparece { animation: ocj-aparece .5s cubic-bezier(.2,.8,.3,1.2); }
@keyframes ocj-aparece { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* Libro del día */
.ocj-dia-cab { display: flex; align-items: center; justify-content: center; gap: .8em; margin-bottom: .8em; }
.ocj-fecha { color: var(--ocj-gris); font-size: .9em; text-transform: capitalize; }
.ocj-dia { background: var(--ocj-crema); border-radius: var(--ocj-radio); padding: 1.3em; }

/* Adivina */
.ocj-adivina-juego { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1.6em; align-items: center; max-width: 720px; margin: 0 auto; }
.ocj-misterio { aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--ocj-crema-2); box-shadow: 0 10px 24px rgba(15,23,42,.2); }
.ocj-misterio img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: filter .6s; user-select: none; pointer-events: none; }
.ocj-intentos { font-size: 1.15em; margin-bottom: .5em !important; }
.ocj-pista { background: #fff7e6; border-radius: 8px; padding: .45em .7em; font-size: .92em; margin-bottom: .4em !important; }
.ocj-opciones { display: grid; gap: .55em; margin-top: .6em; }
.ocj .ocj-opcion { text-align: left; background: #fff; border: 1.5px solid var(--ocj-linea); border-radius: 10px; padding: .75em 1em; font: 500 1em/1.3 system-ui, sans-serif; color: var(--ocj-tinta); cursor: pointer; transition: border-color .15s, background .15s; }
.ocj .ocj-opcion:hover:not(:disabled) { border-color: var(--ocj-rojo); background: var(--ocj-crema); }
.ocj .ocj-opcion.ocj-mal { background: #fdecea; border-color: #f3b7ae; color: #9b2c1c; text-decoration: line-through; cursor: default; }
.ocj .ocj-opcion.ocj-bien { background: #e8f5ec; border-color: var(--ocj-verde); color: #1f5e3a; font-weight: 700; }
.ocj .ocj-opcion:disabled:not(.ocj-mal):not(.ocj-bien) { opacity: .6; cursor: default; }
.ocj-final { max-width: 720px; margin: 1em auto 0; text-align: center; }
.ocj-final .ocj-libro { margin-top: .8em; }
.ocj-stats { display: flex; justify-content: center; gap: 1em; margin-top: 1.2em; }
.ocj-stats div { background: var(--ocj-crema); border-radius: 12px; padding: .7em 1.1em; min-width: 92px; }
.ocj-stats strong { display: block; font: 700 1.5em/1.1 var(--ocj-serif); }
.ocj-stats span { font-size: .8em; color: var(--ocj-gris); }

/* Reto lector */
.ocj-reto-panel { display: flex; align-items: center; gap: 1.6em; justify-content: center; flex-wrap: wrap; background: var(--ocj-crema); border-radius: var(--ocj-radio); padding: 1.3em; margin-bottom: 1em; }
.ocj-anillo { --p: 0; width: 130px; height: 130px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, var(--ocj-crema) 78%, transparent 79%), conic-gradient(var(--ocj-rojo) calc(var(--p) * 1%), var(--ocj-crema-2) 0); }
.ocj-anillo strong { font: 700 1.5em/1 var(--ocj-serif); }
.ocj-anillo span { font-size: .85em; color: var(--ocj-gris); }
.ocj-reto-datos input { width: 5em; text-align: center; }
.ocj-reto-msg { margin-top: .6em !important; font-weight: 600; }
.ocj-leidos { list-style: none; padding: 0; margin: 1em auto; max-width: 560px; counter-reset: none; }
.ocj-leidos li { display: flex; align-items: center; gap: .8em; padding: .55em .7em; border: 1px solid var(--ocj-linea); border-radius: 10px; margin-bottom: .45em; background: #fff; }
.ocj-leidos li img, .ocj-leidos .ocj-mini { width: 34px; height: 51px; object-fit: cover; border-radius: 3px; flex: none; }
.ocj-leidos li > div { flex: 1; min-width: 0; }
.ocj-leidos a, .ocj-leidos strong { display: block; color: var(--ocj-tinta); font-weight: 600; text-decoration: none; }
.ocj-leidos small { color: var(--ocj-gris); }
.ocj .ocj-quitar { background: none; border: 0; color: var(--ocj-gris); cursor: pointer; font-size: 1em; padding: .3em .5em; border-radius: 6px; }
.ocj .ocj-quitar:hover { background: #fdecea; color: #9b2c1c; }
.ocj-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.ocj-confeti i { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: ocj-cae 2.4s ease-in forwards; }
@keyframes ocj-cae { to { transform: translateY(105vh) rotate(720deg); } }

/* Calculadora */
.ocj-calc { background: var(--ocj-crema); border-radius: var(--ocj-radio); padding: 1.2em; max-width: 720px; margin: 0 auto; }
.ocj-calc-campos { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; }
.ocj-calc-campos label { display: flex; flex-direction: column; gap: .25em; font-size: .85em; color: var(--ocj-gris); font-weight: 600; }
.ocj-calc-campos input { width: 9em; }
.ocj-calc-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7em; margin-top: 1em; }
.ocj-calc-cifras div { background: #fff; border-radius: 12px; padding: .8em; text-align: center; }
.ocj-calc-cifras strong { display: block; font: 700 1.3em/1.2 var(--ocj-serif); color: var(--ocj-rojo-osc); }
.ocj-calc-cifras span { font-size: .82em; color: var(--ocj-gris); }
.ocj-calc-mini { padding: .9em; background: #fff; }
.ocj-calc-mini .ocj-calc-cifras div { background: var(--ocj-crema); }

/* Efemérides */
.ocj-efe { display: flex; gap: 1em; align-items: flex-start; background: #fff; border: 1px solid var(--ocj-linea); border-radius: var(--ocj-radio); padding: 1em; margin-bottom: .7em; max-width: 720px; margin-left: auto; margin-right: auto; }
.ocj-efe-hoy { border-color: var(--ocj-rojo); box-shadow: 0 0 0 3px rgba(184,67,47,.12); }
.ocj-efe h3 { font-size: 1.15em; margin-bottom: .2em; }
.ocj-efe p { font-size: .95em; color: #334155; margin-bottom: .35em !important; }
.ocj-efe-fecha { flex: none; width: 58px; text-align: center; background: var(--ocj-rojo); color: #fff; border-radius: 10px; padding: .4em 0; }
.ocj-efe-fecha strong { display: block; font: 700 1.5em/1 var(--ocj-serif); }
.ocj-efe-fecha span { font-size: .75em; text-transform: uppercase; letter-spacing: .05em; }
.ocj-efemerides .ocj-sub { text-align: center; }

/* Zona lectora */
.ocj-zona-tit { text-align: center; font-size: 1.6em !important; margin: 1.6em 0 .8em !important; }
.ocj-herramientas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1em; }
.ocj .ocj-herr { display: flex; flex-direction: column; gap: .3em; background: #fff; border: 1px solid var(--ocj-linea); border-radius: var(--ocj-radio); padding: 1.2em; text-decoration: none; color: var(--ocj-tinta); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ocj .ocj-herr:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.1); border-color: var(--ocj-rojo); }
.ocj-herr .ocj-emoji { font-size: 2em; line-height: 1; }
.ocj-herr strong { font: 700 1.1em/1.25 var(--ocj-serif); }
.ocj-herr span:last-child { font-size: .88em; color: var(--ocj-gris); }

/* En la ficha del libro */
.ocj-ficha { margin: 1.2em 0 0; padding: 1em 1.1em; border: 1px solid var(--ocj-linea); border-radius: var(--ocj-radio); background: var(--ocj-crema); display: flex; flex-direction: column; gap: .7em; }
.ocj-ficha-fila { display: flex; align-items: center; flex-wrap: wrap; gap: .6em; }
.ocj-estrellas { display: inline-flex; }
.ocj .ocj-estrellas button { background: none; border: 0; padding: 0 .08em; font-size: 1.7em; line-height: 1; color: #d6ccbf; cursor: pointer; transition: color .1s, transform .1s; }
.ocj .ocj-estrellas button.ocj-on { color: #e3a008; }
.ocj .ocj-estrellas button:hover { transform: scale(1.15); }
.ocj-votos-res { color: var(--ocj-gris); font-size: .9em; }
.ocj-ficha-calc summary { cursor: pointer; font-weight: 600; font-size: .95em; }
.ocj-ficha-calc[open] summary { margin-bottom: .6em; }

/* Móvil */
@media (max-width: 600px) {
	.ocj-libro { grid-template-columns: 78px 1fr; padding: .8em; }
	.ocj-libro-grande { grid-template-columns: 110px 1fr; }
	.ocj-adivina-juego { grid-template-columns: 1fr; }
	.ocj-misterio { max-width: 200px; margin: 0 auto; }
	.ocj-form { padding: 1em; }
	.ocj .ocj-chip { padding: .55em .9em; font-size: .95em; }
	.ocj-rejilla { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ocj *, .ocj *::before, .ocj *::after { animation: none !important; transition: none !important; }
}

/* Botón de sinopsis completa */
.ocj.ocj-sinopsis-mas { margin: .9em 0 0; }
.ocj.ocj-sinopsis-mas .ocj-btn { font-size: .92em; }