/* «Dímelo en cristiano»: tarjeta destacada en el índice de cada asignatura
   y estilos propios de las páginas de explicación. Funciona sobre los tres temas. */
:root {
  --cr-from: #f59e0b;
  --cr-mid: #f97316;
  --cr-to: #e11d48;
  --cr-ink: #ffffff;
  /* Se mezclan con la superficie del tema activo (aula/impulso claros, craft oscuro). */
  --cr-soft: color-mix(in srgb, var(--cr-mid) 11%, var(--surface, #fff));
  --cr-soft-border: color-mix(in srgb, var(--cr-mid) 35%, var(--surface, #fff));
  --cr-soft-ink: color-mix(in srgb, var(--cr-mid) 70%, var(--text, #171a23));
}

/* ---------- Tarjeta en el índice de la asignatura ---------- */
.tema-card.cr-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--cr-from), var(--cr-mid) 55%, var(--cr-to));
  border-color: transparent; color: var(--cr-ink);
  box-shadow: 0 10px 28px rgba(234, 88, 12, .28);
  transition: transform .18s, box-shadow .18s;
}
.tema-card.cr-card::after {
  content: ""; position: absolute; z-index: -1; right: -40px; bottom: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
}
.tema-card.cr-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(234, 88, 12, .38); border-color: transparent; }
.tema-card.cr-card:focus-visible { outline: 3px solid var(--cr-to); outline-offset: 3px; }
.tema-card.cr-card .tema-code,
.tema-card.cr-card .tema-title,
.tema-card.cr-card .tema-meta { color: var(--cr-ink); }
.tema-card.cr-card .tema-meta { opacity: .92; }
.tema-card.cr-card .tema-title { padding-right: 64px; }

.cr-seal {
  position: absolute; top: 14px; right: 14px;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--cr-mid);
  box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.18);
  transform: rotate(-10deg);
  animation: cr-wiggle 5s ease-in-out infinite;
}
.cr-seal svg { width: 30px; height: 30px; }
@keyframes cr-wiggle {
  0%, 88%, 100% { transform: rotate(-10deg); }
  92% { transform: rotate(6deg) scale(1.08); }
  96% { transform: rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) { .cr-seal { animation: none; } }

.cr-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 10px; border-radius: 99px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Páginas de explicación ---------- */
.cr-page .module-header .badge.cr-badge,
.badge.cr-badge {
  background: linear-gradient(135deg, var(--cr-from), var(--cr-to));
  color: #fff; border-color: transparent;
}
.cr-page .cr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cr-page .cr-lista .tema-card { border-left: 5px solid var(--cr-mid); }

.cr-analogia {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-sm, 9px);
  background: var(--cr-soft); border: 1px solid var(--cr-soft-border); color: var(--text);
}
.cr-analogia .cr-ico { font-size: 26px; line-height: 1; flex: none; }
.cr-analogia strong.tag { display: block; color: var(--cr-soft-ink); margin-bottom: 2px; }

.cr-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cr-vs > div > .cr-vs-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.cr-vs .cr-sin { color: var(--danger, #be123c); }
.cr-vs .cr-con { color: var(--accent, #0f766e); }
.cr-vs pre { max-height: 440px; overflow: auto; }
.cr-vs > div { min-width: 0; }
@media (max-width: 760px) { .cr-vs { grid-template-columns: minmax(0, 1fr); } }

.cr-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.cr-toc a {
  padding: 5px 12px; border-radius: 99px; font-size: 13px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e6e8ef); color: var(--text);
}
.cr-toc a:hover { border-color: var(--cr-mid); text-decoration: none; }

.cr-quiz details {
  margin: 0 0 10px; padding: 12px 14px; border-radius: var(--radius-sm, 9px);
  background: var(--surface-alt, #f0f2f7); border: 1px solid var(--border, #e6e8ef);
}
.cr-quiz summary { cursor: pointer; font-weight: 650; }
.cr-quiz details[open] summary { margin-bottom: 8px; }
.cr-quiz details p:last-child { margin-bottom: 0; }

.cr-fuentes { font-size: 13px; color: var(--text-muted); }
.cr-fuentes li { margin-bottom: 4px; }
.cr-page .module-page { max-width: 980px; }
.cr-page section.block { scroll-margin-top: 20px; }