/*
 * EEJ Panel — Independencia Judicial · Estilos externos v2.2
 * ===========================================================
 * Scope: body.course-396 (Moodle courseid=396)
 * Generado: regenerado automáticamente desde panel-portada-curso-v2.2.html
 *
 * IMPORTANTE: este CSS se carga globalmente vía additionalhtmlhead,
 * pero solo aplica al curso 396 por el prefijo body.course-396.
 * NO modificar manualmente — regenerar desde el panel HTML original
 * para mantener una sola fuente de verdad.
 *
 * CAMBIOS v2.2 vs v2.1:
 *  - Tipografía: TODA itálica removida del panel. Solo los 6 estilos
 *    del framework: Hero Title, Section Title, Overline, Hero Subtitle,
 *    Conclusion Quote, Body (Emphasis Title queda excluido).
 *  - "Independencia Judicial" → Playfair Black 900 UPRIGHT
 *  - "Distinción al Mérito" → Playfair Black 900 UPRIGHT
 *  - Fondo: --cream-bg → --white-soft (#f5f5f5) con halo cálido
 *  - Botones primarios: navy + gold (autoridad). Hover navy-deeper.
 *  - Variante .is-completion (teal) SOLO para acciones de cierre
 *    (reclamar insignia con 6/6 unidades).
 *  - Overline: font-weight 600 → 500 (regla framework)
 *  - hero-sub letter-spacing: .18em → .22em
 *  - Animaciones: .reveal.d1..d12 → .reveal + .delay-1..12
 *    (curva no-lineal .1/.2/.35/.5/.65/...)
 *  - Unit cards: stagger por :nth-child (130ms entre cards)
 *  - Blobs ambient: opacity reducida (.45/.22/.12 → .28/.18/.10)
 *  - Footer institucional de 3 niveles (.foot-pro/-divider/-institutional)
 *  - Google Fonts: sin pesos itálicos (ahorra ~30KB)
 * ===========================================================
 */


/* ============================================================
   Carga de fuentes — Fallback embebido
   ------------------------------------------------------------
   Lo IDEAL es cargar estas fuentes una sola vez vía Moodle:
       Administración → Apariencia → Additional HTML → additionalhtmlhead

       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link rel="stylesheet"
         href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600&display=swap">

   Pesos cargados (exactamente los 6 estilos tipográficos del proyecto):
     · Playfair Display 400 (reservado), 700 (foot-primary), 900 (Hero/Section Titles)
     · Montserrat 500 (Overline, Hero Subtitle), 600/700 (utilitarios), 800 (Conclusion)
     · Open Sans 400 (Body), 600 (énfasis ligero)

   NO se carga itálica — el proyecto no usa Emphasis Title (Black Italic 900).
   Este @import sirve como fallback embebido; preferí siempre el <link> en el head.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600&display=swap');

body.course-396 #eej-panel {
  /* === Paleta verificada · Framework Visual EEJ === */
  --navy-deep:#2b3a5e;
  --navy-deeper:#1e2e53;
  --navy-mid:#3a4f7a;
  --navy-light:#4a6290;
  --navy-steel:#445675;
  --teal-primary:#2a8c8c;
  --teal-vivid:#1297ad;
  --teal-bright:#3aacac;
  --teal-dark:#1e6b6b;
  --teal-ocean:#067480;
  --gold-primary:#d4b87a;
  --gold-light:#e8d8b0;
  --gold-rich:#e7d092;
  --gold-soft:#f4ddab;
  --amber-bright:#f9b44d;
  --orange-warm:#d9943a;
  --orange-burnt:#c17114;
  --brown-dark:#5c3420;
  --brown-mid:#7a4a28;
  --brown-struct:#8b5e3c;
  --terracotta:#c25a4a;
  --cream-white:#f8f3e4;
  --cream-light:#f0e6d3;
  --cream-warm:#e9dec1;
  --cream-bg:#e8dcc8;
  --tan-beige:#d6c9a9;
  --white-soft:#f5f5f5;
  --gray-text:#3a3a3a;

  /* === Tipografía oficial === */
  --font-display:'Playfair Display', Georgia, serif;
  --font-sans:'Montserrat', system-ui, sans-serif;
  --font-body:'Open Sans', system-ui, sans-serif;

  /* === Easing === */
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --ease-bounce:cubic-bezier(.68,-.55,.27,1.55);
}

body.course-396 #eej-panel * {box-sizing:border-box;margin:0;padding:0}

body.course-396 #eej-panel {
  font-family:var(--font-body);
  background:var(--white-soft);
  color:var(--gray-text);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  /* Patrón de dots sutiles + halo cálido superior (sensación de pergamino sin saturar) */
  background-image:
    radial-gradient(circle, rgba(43,58,94,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232,220,200,.4), transparent 360px);
  background-size:22px 22px, 100% 100%;

  /* === Portada de curso: full-width centrado, no más bloque lateral === */
  max-width:1200px;
  margin:0 auto;
  padding:clamp(20px, 3vw, 40px) clamp(16px, 3vw, 32px);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(43,58,94,.08);
}

/* === Sombras ambientales (Hero shapes) === */
body.course-396 #eej-panel .ambient {position:fixed;pointer-events:none;z-index:0;filter:blur(60px)}

body.course-396 #eej-panel .ambient-1 {width:480px;height:480px;top:-160px;left:-120px;background:radial-gradient(circle,var(--gold-rich),transparent 70%);opacity:.28;animation:eej-floatSlow 18s ease-in-out infinite}

body.course-396 #eej-panel .ambient-2 {width:420px;height:420px;bottom:-160px;right:-120px;background:radial-gradient(circle,var(--teal-vivid),transparent 70%);opacity:.18;animation:eej-floatSlow 22s ease-in-out infinite reverse}

body.course-396 #eej-panel .ambient-3 {width:320px;height:320px;top:38%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--orange-warm),transparent 70%);opacity:.10;animation:eej-floatSlow 16s ease-in-out infinite}

@keyframes eej-floatSlow{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(40px,-25px,0) rotate(6deg)}
}

body.course-396 #eej-panel .ambient-3 {
  animation-name:eej-floatSlowCenter
}

@keyframes eej-floatSlowCenter{
  0%,100%{transform:translate(-50%,-50%) rotate(0)}
  50%{transform:translate(-45%,-55%) rotate(6deg)}
}

/* === Top bar === */
body.course-396 #eej-panel .topbar {
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  backdrop-filter:blur(10px);
  background:rgba(248,243,228,.55);
  border-bottom:1px solid rgba(43,58,94,.08);
}

body.course-396 #eej-panel .brand {display:flex;align-items:center;gap:14px}

body.course-396 #eej-panel .brand-mark {
  width:40px;height:40px;border-radius:9px;
  background:var(--navy-deep);
  display:grid;place-items:center;
  color:var(--gold-primary);
  font-family:var(--font-display);font-weight:900;font-size:18px;
  letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(43,58,94,.2);
}

body.course-396 #eej-panel .brand-text {
  font-family:var(--font-sans);
  font-size:11px;letter-spacing:.25em;
  color:var(--navy-deep);text-transform:uppercase;font-weight:700;
  line-height:1.3;
}

body.course-396 #eej-panel .brand-text small {
  display:block;font-size:9px;letter-spacing:.18em;
  color:var(--brown-mid);margin-top:2px;font-weight:500;
}

body.course-396 #eej-panel .top-actions {display:flex;gap:10px}

body.course-396 #eej-panel .icon-btn {
  width:46px;height:46px;
  border:1.5px solid var(--navy-deep);
  background:transparent;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  transition:all .25s var(--ease-out);
  color:var(--navy-deep);
}

body.course-396 #eej-panel .icon-btn:hover {
  background:var(--navy-deep);color:var(--gold-primary);
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(43,58,94,.25);
}

body.course-396 #eej-panel .icon-btn svg {width:20px;height:20px}

/* === Hero === */
body.course-396 #eej-panel .hero {
  position:relative;z-index:5;
  padding:clamp(36px,5vw,64px) clamp(20px,4vw,56px) clamp(20px,3vw,40px);
  text-align:center;
}

body.course-396 #eej-panel .hero-overline {
  font-family:var(--font-sans);
  font-size:clamp(.78rem,1vw,.92rem);
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--teal-primary);font-weight:500;
  margin-bottom:18px;display:inline-flex;align-items:center;gap:14px;
}

body.course-396 #eej-panel .hero-overline::before,
body.course-396 #eej-panel .hero-overline::after {
  content:'';width:36px;height:1px;background:var(--teal-primary);display:inline-block;
}

body.course-396 #eej-panel .hero-overline b {color:var(--orange-burnt);font-weight:700}

body.course-396 #eej-panel .hero-title {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.4rem,5.5vw,4.6rem);
  line-height:.95;letter-spacing:-.02em;
  color:var(--navy-deep);text-transform:uppercase;
}

body.course-396 #eej-panel .hero-title em {
  font-style:normal;
  color:var(--orange-burnt);
  font-weight:900;
  display:block;
  margin-top:6px;
}

body.course-396 #eej-panel .hero-divider {
  width:84px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-primary),transparent);
  margin:24px auto 18px;border-radius:2px;
}

body.course-396 #eej-panel .hero-sub {
  font-family:var(--font-sans);
  font-size:clamp(.9rem,1.3vw,1.1rem);
  color:var(--brown-mid);
  letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;
}

body.course-396 #eej-panel .hero-instruction {
  margin-top:26px;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;
  background:rgba(212,184,122,.22);
  border:1px solid rgba(212,184,122,.5);
  border-radius:100px;
  font-family:var(--font-body);font-size:.85rem;
  color:var(--brown-dark);
}

body.course-396 #eej-panel .hero-instruction svg {width:16px;height:16px;color:var(--orange-burnt)}

/* === Units grid === */
body.course-396 #eej-panel .units {
  position:relative;z-index:5;
  max-width:1180px;margin:0 auto;
  padding:24px clamp(20px,4vw,56px) 36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,26px);
}

@media (max-width:880px) {
  body.course-396 #eej-panel .units {grid-template-columns:repeat(2,1fr)}
}

@media (max-width:540px) {
  body.course-396 #eej-panel .units {grid-template-columns:1fr}
}

/* === Unit card 3D flip === */
body.course-396 #eej-panel .unit {
  position:relative;
  aspect-ratio:5/4;
}

body.course-396 #eej-panel .unit:not(.locked) {cursor:pointer}

body.course-396 #eej-panel .unit.locked {cursor:not-allowed}

body.course-396 #eej-panel .unit-inner {
  position:relative;width:100%;height:100%;
}

/* Hover lift on desktop */
@media (hover:hover) {
  .unit:not(.locked):hover .unit-inner{
    transform:translateY(-4px);
  }
  body.course-396 #eej-panel .unit-inner { transition:transform .35s var(--ease-out) }
  .unit:not(.locked):hover .unit-front{
    box-shadow:
      0 12px 32px rgba(43,58,94,.28),
      0 0 0 1px rgba(212,184,122,.4),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}

body.course-396 #eej-panel .unit-face {
  position:absolute;inset:0;
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
}

/* --- Front face --- */
body.course-396 #eej-panel .unit-front {
  background:linear-gradient(135deg,var(--navy-deeper) 0%,var(--navy-deep) 100%);
  padding:clamp(18px,2.2vw,24px);
  box-shadow:
    0 4px 14px rgba(43,58,94,.18),
    0 1px 3px rgba(43,58,94,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

body.course-396 #eej-panel .unit:not(.locked):not(.completed) .unit-front {will-change:transform}

body.course-396 #eej-panel .unit-front::before {
  content:'';position:absolute;top:0;right:0;
  width:60%;height:60%;
  background:radial-gradient(circle at top right, rgba(212,184,122,.18),transparent 60%);
  pointer-events:none;
}

body.course-396 #eej-panel .unit-corner {
  position:absolute;top:18px;right:18px;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(212,184,122,.55);
  display:grid;place-items:center;
  color:var(--gold-primary);
  transition:all .35s var(--ease-out);
  z-index:2;
}

body.course-396 #eej-panel .unit-corner svg {width:16px;height:16px}

body.course-396 #eej-panel .unit-corner::after {
  content:'';position:absolute;top:-2px;right:-2px;
  width:9px;height:9px;border-radius:50%;
  background:var(--teal-vivid);
  box-shadow:0 0 0 2px var(--navy-deeper), 0 0 8px rgba(42,140,140,.7);
  opacity:0;transform:scale(.4);
  transition:all .3s var(--ease-out);
}

body.course-396 #eej-panel .unit.in-progress .unit-corner::after {
  opacity:1;transform:scale(1);
  animation:eej-dotPulse 1.8s ease-in-out infinite;
}

@keyframes eej-dotPulse{
  0%,100%{box-shadow:0 0 0 2px var(--navy-deeper), 0 0 6px rgba(42,140,140,.5)}
  50%{box-shadow:0 0 0 2px var(--navy-deeper), 0 0 14px rgba(42,140,140,1)}
}

body.course-396 #eej-panel .unit.in-progress .unit-corner { border-color:rgba(42,140,140,.55) }

body.course-396 #eej-panel .unit-num {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.5rem,2vw,1.85rem);
  color:var(--gold-primary);
  letter-spacing:-.01em;line-height:1;
  margin-bottom:8px;position:relative;z-index:2;
}

body.course-396 #eej-panel .unit-num::before {
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--orange-warm);
  margin-right:10px;vertical-align:middle;
  transform:translateY(-3px);
}

body.course-396 #eej-panel .unit-title {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(.92rem,1.18vw,1.05rem);
  color:var(--cream-white);text-transform:uppercase;
  line-height:1.18;margin-top:auto;
  letter-spacing:-.005em;max-width:92%;
  position:relative;z-index:2;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}

body.course-396 #eej-panel .unit-meta {
  margin-top:14px;
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-sans);
  font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  color:rgba(240,230,211,.68);
  position:relative;z-index:2;
}

body.course-396 #eej-panel .unit-meta-dot {width:4px;height:4px;background:var(--gold-primary);border-radius:50%}

body.course-396 #eej-panel .unit-bar {
  position:absolute;bottom:0;left:0;
  width:100%;height:5px;
  background:rgba(255,255,255,.05);overflow:visible;
}

body.course-396 #eej-panel .unit-bar::after {
  content:'';display:block;height:100%;
  width:var(--p,0%);
  background:linear-gradient(90deg,var(--teal-primary),var(--teal-vivid));
  transition:width .8s var(--ease-out);
  box-shadow:0 0 8px rgba(42,140,140,.5);
}

body.course-396 #eej-panel .unit-bar-pct {
  position:absolute;right:8px;top:-22px;
  font-family:var(--font-sans);font-size:.6rem;font-weight:700;
  letter-spacing:.12em;
  color:var(--teal-vivid);
  background:rgba(0,28,40,.5);
  padding:2px 7px;border-radius:10px;
  border:1px solid rgba(42,140,140,.4);
  pointer-events:none;
  transition:opacity .3s var(--ease-out);
}

body.course-396 #eej-panel .unit.locked .unit-bar-pct,
body.course-396 #eej-panel .unit.unlocked[data-state="unlocked"] .unit-bar-pct { opacity:0 }

body.course-396 #eej-panel .unit.in-progress .unit-bar-pct { opacity:1 }

body.course-396 #eej-panel .unit.completed .unit-bar-pct {
  color:var(--gold-primary);
  background:rgba(43,58,94,.6);
  border-color:rgba(212,184,122,.5);
}

/* === LOCKED state === */
body.course-396 #eej-panel .unit.locked .unit-front {
  background:linear-gradient(135deg,#d6c9a9 0%,#c4b894 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.3);
}

body.course-396 #eej-panel .unit.locked .unit-front::before {display:none}

body.course-396 #eej-panel .unit.locked .unit-num,
body.course-396 #eej-panel .unit.locked .unit-title,
body.course-396 #eej-panel .unit.locked .unit-meta,
body.course-396 #eej-panel .unit.locked .unit-corner,
body.course-396 #eej-panel .unit.locked .unit-bar {opacity:0}

body.course-396 #eej-panel .lock-overlay {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  z-index:3;
}

body.course-396 #eej-panel .lock-overlay svg {
  width:54px;height:54px;color:var(--navy-deeper);
  filter:drop-shadow(0 2px 4px rgba(43,58,94,.2));
}

body.course-396 #eej-panel .lock-label {
  font-family:var(--font-sans);font-weight:800;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:.1em;
  color:var(--navy-deeper);
}

body.course-396 #eej-panel .unit:not(.locked) .lock-overlay {opacity:0;transform:scale(.4);pointer-events:none}

body.course-396 #eej-panel .unit.unlocking .lock-overlay svg {animation:eej-unlockShake .7s ease-out forwards}

@keyframes eej-unlockShake{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.18) rotate(-14deg)}
  55%{transform:scale(1.22) rotate(10deg);opacity:1}
  100%{transform:scale(0) rotate(0);opacity:0}
}

body.course-396 #eej-panel .unit.locked.shake {animation:eej-lockShake .45s ease-in-out}

@keyframes eej-lockShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

/* === COMPLETED state === */
body.course-396 #eej-panel .unit.completed {cursor:default}

body.course-396 #eej-panel .unit.completed .unit-front {
  background:linear-gradient(135deg,var(--navy-deeper) 0%,var(--teal-dark) 100%);
  box-shadow:
    0 4px 14px rgba(42,140,140,.28),
    0 0 0 2px var(--gold-primary),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.course-396 #eej-panel .unit.completed .unit-num,
body.course-396 #eej-panel .unit.completed .unit-title,
body.course-396 #eej-panel .unit.completed .unit-meta,
body.course-396 #eej-panel .unit.completed .unit-corner {opacity:0}

body.course-396 #eej-panel .completed-overlay {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  pointer-events:none;
  opacity:0;transform:scale(.8);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-bounce);
  padding:20px;text-align:center;
  z-index:3;
}

body.course-396 #eej-panel .unit.completed .completed-overlay {opacity:1;transform:scale(1)}

body.course-396 #eej-panel .star-icon {
  width:50px;height:50px;color:var(--gold-primary);
  filter:drop-shadow(0 0 14px rgba(212,184,122,.6));
  animation:eej-starPulse 2.6s ease-in-out infinite;
}

@keyframes eej-starPulse{
  0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 14px rgba(212,184,122,.6))}
  50%{transform:scale(1.1) rotate(8deg);filter:drop-shadow(0 0 24px rgba(212,184,122,.95))}
}

body.course-396 #eej-panel .completed-label {
  font-family:var(--font-sans);
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-primary);font-weight:600;
}

body.course-396 #eej-panel .completed-unit {
  font-family:var(--font-display);font-weight:900;
  font-size:1.45rem;color:var(--cream-white);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
}

/* Completed cards keep the same hover lift as others */
@media (hover:hover) {
  .unit.completed:hover .unit-inner{transform:translateY(-4px)}
}

/* === Burst rings on completion === */
body.course-396 #eej-panel .burst {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}

body.course-396 #eej-panel .burst-ring {
  position:absolute;width:24px;height:24px;
  border:2px solid var(--gold-primary);border-radius:50%;
  opacity:0;
}

body.course-396 #eej-panel .unit.bursting .burst-ring {animation:eej-burstRing 1.1s ease-out forwards}

body.course-396 #eej-panel .unit.bursting .burst-ring:nth-child(2) {animation-delay:.18s;border-color:var(--teal-vivid)}

body.course-396 #eej-panel .unit.bursting .burst-ring:nth-child(3) {animation-delay:.36s;border-color:var(--orange-warm)}

@keyframes eej-burstRing{
  0%{transform:scale(0);opacity:.95}
  100%{transform:scale(9);opacity:0}
}

/* === Mini medal corner badge (sits above all faces) === */
body.course-396 #eej-panel .mini-medal {
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;
  opacity:0;transform:scale(0) rotate(-180deg);
  transition:opacity .5s var(--ease-out) .5s, transform .7s var(--ease-bounce) .5s;
  z-index:6;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

body.course-396 #eej-panel .unit.completed .mini-medal {opacity:1;transform:scale(1) rotate(0)}

body.course-396 #eej-panel .mini-medal svg {width:100%;height:100%;display:block}

/* === Progress section === */
body.course-396 #eej-panel .progress-section {
  position:relative;z-index:5;
  max-width:1180px;margin:0 auto;
  padding:20px clamp(20px,4vw,56px) 32px;
}

body.course-396 #eej-panel .progress-row {
  display:grid;grid-template-columns:1fr auto;gap:32px;
  align-items:end;
}

@media (max-width:760px) {
  body.course-396 #eej-panel .progress-row {grid-template-columns:1fr;gap:18px}
}

body.course-396 #eej-panel .progress-track-wrap {display:flex;flex-direction:column;gap:10px}

body.course-396 #eej-panel .progress-meta {
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-sans);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy-deep);font-weight:600;
}

body.course-396 #eej-panel .progress-meta b {color:var(--orange-burnt);font-weight:800;font-size:.85rem}

body.course-396 #eej-panel .progress-track {
  height:8px;background:rgba(43,58,94,.12);
  border-radius:100px;overflow:hidden;position:relative;
}

body.course-396 #eej-panel .progress-fill {
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--orange-warm),var(--gold-primary),var(--teal-vivid));
  border-radius:100px;
  transition:width .9s var(--ease-out);
  position:relative;
  box-shadow:0 0 12px rgba(212,184,122,.5);
}

body.course-396 #eej-panel .progress-actions {display:flex;gap:10px;flex-wrap:wrap}

body.course-396 #eej-panel .btn {
  padding:13px 26px;border:none;border-radius:100px;
  font-family:var(--font-sans);font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  cursor:pointer;transition:all .3s var(--ease-out);
  display:inline-flex;align-items:center;gap:10px;
  position:relative;overflow:hidden;
}

body.course-396 #eej-panel .btn-primary {
  background:var(--navy-deep);color:var(--gold-primary);
  box-shadow:0 4px 14px rgba(43,58,94,.25);
}

body.course-396 #eej-panel .btn-primary::before {
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,184,122,.35),transparent);
  transition:left .6s var(--ease-out);
}

body.course-396 #eej-panel .btn-primary:hover:not(:disabled) {
  background:var(--navy-deeper);
  color:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(43,58,94,.42);
}

body.course-396 #eej-panel .btn-primary:hover:not(:disabled)::before {left:100%}

body.course-396 #eej-panel .btn-primary:disabled {
  background:var(--tan-beige);color:var(--brown-mid);
  cursor:not-allowed;transform:none;box-shadow:none;
}

body.course-396 #eej-panel .btn-primary:disabled::before {display:none}

/* === Variante .is-completion ===
   Estado especial cuando el botón representa una acción de CIERRE
   (reclamar insignia con 6/6 unidades). Solo aquí se justifica el teal,
   que en el framework es color exclusivo de cierre/conclusión. */
body.course-396 #eej-panel .btn-primary.is-completion {
  background:linear-gradient(135deg,var(--teal-primary),var(--teal-ocean));
  color:var(--cream-white);
  box-shadow:0 4px 14px rgba(42,140,140,.35);
}

body.course-396 #eej-panel .btn-primary.is-completion:hover:not(:disabled) {
  background:linear-gradient(135deg,var(--teal-vivid),var(--teal-primary));
  color:var(--cream-white);
  box-shadow:0 10px 26px rgba(42,140,140,.5);
}

body.course-396 #eej-panel .btn-ghost {
  background:transparent;color:var(--navy-deep);
  border:1.5px solid var(--navy-deep);
}

body.course-396 #eej-panel .btn-ghost:hover {
  background:var(--navy-deep);color:var(--cream-white);
  transform:translateY(-2px);
}

/* === Insignia tiers row (above progress bar) === */
body.course-396 #eej-panel .tiers-row {
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,32px);
  margin:8px auto 32px;
  padding:16px clamp(20px,4vw,56px);
  flex-wrap:wrap;
}

body.course-396 #eej-panel .tier {
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 20px;border-radius:14px;
  background:rgba(255,255,255,.35);
  border:1.5px solid rgba(43,58,94,.08);
  min-width:120px;
  position:relative;
  transition:all .5s var(--ease-out);
}

body.course-396 #eej-panel .tier.active {
  background:linear-gradient(135deg,rgba(212,184,122,.28),rgba(217,148,58,.18));
  border-color:var(--gold-primary);
  box-shadow:0 8px 24px rgba(212,184,122,.3);
  transform:translateY(-4px);
}

body.course-396 #eej-panel .tier-medal {width:54px;height:54px;filter:grayscale(.7) opacity(.45);transition:filter .6s var(--ease-out)}

body.course-396 #eej-panel .tier.active .tier-medal {filter:grayscale(0) opacity(1);animation:eej-medalSpin .8s var(--ease-bounce)}

@keyframes eej-medalSpin{
  0%{transform:scale(0) rotate(-180deg)}
  100%{transform:scale(1) rotate(0)}
}

body.course-396 #eej-panel .tier-label {
  font-family:var(--font-sans);font-size:.65rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy-deep);font-weight:700;
}

body.course-396 #eej-panel .tier-req {
  font-family:var(--font-body);font-size:.7rem;
  color:var(--brown-mid);
}

body.course-396 #eej-panel .tier.active .tier-label {color:var(--orange-burnt)}

/* === Insignia modal === */
body.course-396 #eej-panel .insignia-modal {
  position:fixed;inset:0;
  background:rgba(43,58,94,.88);
  backdrop-filter:blur(14px);
  display:grid;place-items:center;
  z-index:100;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
  padding:20px;
}

body.course-396 #eej-panel .insignia-modal.show {opacity:1;pointer-events:auto}

body.course-396 #eej-panel .insignia-card {
  background:linear-gradient(160deg,var(--cream-white) 0%,var(--cream-warm) 100%);
  border-radius:24px;
  padding:clamp(32px,5vw,52px) clamp(28px,4vw,48px);
  max-width:520px;width:100%;text-align:center;position:relative;
  transform:scale(.85);
  transition:transform .7s var(--ease-bounce);
  border:2px solid var(--gold-primary);
  box-shadow:0 32px 80px rgba(0,0,0,.45);
}

body.course-396 #eej-panel .insignia-modal.show .insignia-card {transform:scale(1)}

body.course-396 #eej-panel .insignia-medal-wrap {
  position:relative;width:clamp(180px,26vw,220px);
  margin:0 auto 18px;
}

body.course-396 #eej-panel .insignia-medal-wrap svg {
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 32px rgba(221,147,51,.4));
  animation:eej-medalFloat 4s ease-in-out infinite;
}

@keyframes eej-medalFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-10px) rotate(2deg)}
}

body.course-396 #eej-panel .insignia-overline {
  font-family:var(--font-sans);font-size:.78rem;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--teal-primary);font-weight:700;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:12px;
}

body.course-396 #eej-panel .insignia-overline::before,
body.course-396 #eej-panel .insignia-overline::after {
  content:'';width:24px;height:1px;background:var(--teal-primary);display:inline-block;
}

body.course-396 #eej-panel .insignia-title {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.7rem,4vw,2.3rem);
  color:var(--navy-deep);text-transform:uppercase;
  line-height:1;margin-bottom:14px;
  letter-spacing:-.01em;
}

body.course-396 #eej-panel .insignia-text {
  font-family:var(--font-body);color:var(--brown-dark);
  font-size:.95rem;line-height:1.55;margin-bottom:24px;
  max-width:380px;margin-left:auto;margin-right:auto;
}

body.course-396 #eej-panel .insignia-text em {color:var(--orange-burnt);font-style:normal;font-weight:600}

body.course-396 #eej-panel .insignia-actions {
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}

/* Sparkles inside the modal */
body.course-396 #eej-panel .sparkle {
  position:absolute;width:6px;height:6px;
  background:var(--gold-primary);border-radius:50%;
  opacity:0;pointer-events:none;
}

body.course-396 #eej-panel .insignia-modal.show .sparkle {
  animation:eej-sparkleAnim 2.2s ease-out forwards;
}

@keyframes eej-sparkleAnim{
  0%{transform:translate(0,0) scale(0);opacity:0}
  20%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}
  100%{transform:translate(calc(var(--tx)*1.5),calc(var(--ty)*1.5)) scale(0);opacity:0}
}

/* === Footer institucional (3 niveles) === */
body.course-396 #eej-panel .foot-pro {
  position:relative;z-index:5;
  padding:36px clamp(20px,4vw,56px) 28px;
  text-align:center;
  font-family:var(--font-body);
  color:var(--navy-deep);
}

body.course-396 #eej-panel .foot-divider {
  width:120px;height:2px;
  margin:0 auto 24px;
  background:linear-gradient(90deg,
    transparent,
    var(--gold-primary) 30%,
    var(--gold-primary) 70%,
    transparent);
  border-radius:2px;
}

body.course-396 #eej-panel .foot-institutional {
  display:flex;flex-direction:column;
  gap:10px;
  max-width:720px;
  margin:0 auto;
}

body.course-396 #eej-panel .foot-primary {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.95rem,1.4vw,1.15rem);
  color:var(--navy-deep);
  letter-spacing:.005em;
  line-height:1.3;
}

body.course-396 #eej-panel .foot-primary strong {
  font-weight:900;
  color:var(--navy-deeper);
}

body.course-396 #eej-panel .foot-secondary {
  font-family:var(--font-sans);
  font-weight:500;
  font-size:clamp(.78rem,1vw,.88rem);
  color:var(--brown-mid);
  letter-spacing:.02em;
  line-height:1.55;
}

body.course-396 #eej-panel .foot-secondary b {
  font-weight:700;
  color:var(--teal-primary);
}

body.course-396 #eej-panel .foot-secondary abbr {
  text-decoration:none;
  border-bottom:1px dotted var(--brown-mid);
  cursor:help;
}

body.course-396 #eej-panel .foot-sep {
  color:var(--gold-primary);
  margin:0 .35em;
  font-weight:700;
}

body.course-396 #eej-panel .foot-meta {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(43,58,94,.1);
  font-family:var(--font-sans);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy-light);
  opacity:.75;
}

body.course-396 #eej-panel .foot-meta b {color:var(--orange-burnt);font-weight:700}

/* === Reveal animations · alineado al framework ===
   Convención del framework visual EEJ:
     .reveal, .reveal-left, .reveal-right, .reveal-scale + .delay-N
   Curva de delays (1-5) es no-lineal por diseño del framework:
     .1s, .2s, .35s, .5s, .65s — crea ritmo de "ease" en lugar de metrónomo
   .delay-6..12 extienden con incremento .15s para elementos profundos.
   ============================================================ */
body.course-396 #eej-panel .reveal {
  opacity:0;transform:translateY(40px);
  animation:eej-revealUp .85s var(--ease-out) forwards;
}

body.course-396 #eej-panel .reveal-left {
  opacity:0;transform:translateX(-50px);
  animation:eej-revealLeft .85s var(--ease-out) forwards;
}

body.course-396 #eej-panel .reveal-right {
  opacity:0;transform:translateX(50px);
  animation:eej-revealRight .85s var(--ease-out) forwards;
}

body.course-396 #eej-panel .reveal-scale {
  opacity:0;transform:scale(.88);
  animation:eej-revealScale .85s var(--ease-out) forwards;
}

body.course-396 #eej-panel .delay-1  {animation-delay:.10s}
body.course-396 #eej-panel .delay-2  {animation-delay:.20s}
body.course-396 #eej-panel .delay-3  {animation-delay:.35s}
body.course-396 #eej-panel .delay-4  {animation-delay:.50s}
body.course-396 #eej-panel .delay-5  {animation-delay:.65s}
body.course-396 #eej-panel .delay-6  {animation-delay:.80s}
body.course-396 #eej-panel .delay-7  {animation-delay:.95s}
body.course-396 #eej-panel .delay-8  {animation-delay:1.10s}
body.course-396 #eej-panel .delay-9  {animation-delay:1.25s}
body.course-396 #eej-panel .delay-10 {animation-delay:1.75s}
body.course-396 #eej-panel .delay-11 {animation-delay:1.90s}
body.course-396 #eej-panel .delay-12 {animation-delay:2.05s}

@keyframes eej-revealUp    {to{opacity:1;transform:translateY(0)}}
@keyframes eej-revealLeft  {to{opacity:1;transform:translateX(0)}}
@keyframes eej-revealRight {to{opacity:1;transform:translateX(0)}}
@keyframes eej-revealScale {to{opacity:1;transform:scale(1)}}

/* === Stagger de las 6 unit cards (reemplaza .d8/.d9 del v2.1) ===
   Aparecen entre 1.05s y 1.70s, con 130ms entre cada una. Se siente
   más "musical" que los 100ms exactos del v2.1. */
body.course-396 #eej-panel .units .unit {
  opacity:0;
  animation:eej-revealUp .7s var(--ease-out) forwards;
}
body.course-396 #eej-panel .units .unit:nth-child(1) {animation-delay:1.05s}
body.course-396 #eej-panel .units .unit:nth-child(2) {animation-delay:1.18s}
body.course-396 #eej-panel .units .unit:nth-child(3) {animation-delay:1.31s}
body.course-396 #eej-panel .units .unit:nth-child(4) {animation-delay:1.44s}
body.course-396 #eej-panel .units .unit:nth-child(5) {animation-delay:1.57s}
body.course-396 #eej-panel .units .unit:nth-child(6) {animation-delay:1.70s}

/* ============================================================
   View transitions · grid ↔ detail
   ============================================================ */
body.course-396 #eej-panel .view {
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}

body.course-396 #eej-panel .view.hidden { display:none !important }

body.course-396 #eej-panel #grid-view.out { opacity:0; transform:translateY(-8px); pointer-events:none }

body.course-396 #eej-panel #detail-view { opacity:0; transform:translateY(14px) }

body.course-396 #eej-panel #detail-view.show { opacity:1; transform:translateY(0) }

body.course-396 #eej-panel #detail-view {
  max-width:880px;
  margin:30px auto 60px;
  padding:0 clamp(16px,3vw,32px);
  position:relative;
  z-index:2;
}

body.course-396 #eej-panel .dt-panel {
  position:relative;
  background:linear-gradient(140deg,var(--cream-white) 0%, var(--cream-warm) 100%);
  border:2px solid var(--gold-primary);
  border-radius:22px;
  padding:clamp(22px,3vw,38px);
  box-shadow:
    0 18px 48px rgba(43,58,94,.18),
    0 4px 12px rgba(212,184,122,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}

body.course-396 #eej-panel .dt-panel::before {
  content:'';position:absolute;top:0;right:0;
  width:240px;height:240px;
  background:radial-gradient(circle at top right, rgba(217,148,58,.16), transparent 60%);
  pointer-events:none;
}

body.course-396 #eej-panel .dt-panel::after {
  content:'';position:absolute;bottom:0;left:0;
  width:200px;height:200px;
  background:radial-gradient(circle at bottom left, rgba(42,140,140,.13), transparent 60%);
  pointer-events:none;
}

body.course-396 #eej-panel .dt-back {
  background:transparent;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-weight:700;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange-burnt);
  padding:6px 12px 6px 0;
  margin-bottom:8px;
  transition:color .22s var(--ease-out), transform .22s var(--ease-out);
  position:relative;z-index:2;
}

body.course-396 #eej-panel .dt-back:hover { color:var(--navy-deep); transform:translateX(-2px) }

body.course-396 #eej-panel .dt-back svg { width:16px;height:16px }

body.course-396 #eej-panel .dt-header { position:relative; z-index:2; margin-bottom:24px }

body.course-396 #eej-panel .dt-overline {
  font-family:var(--font-sans);font-weight:700;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange-burnt);
  margin-bottom:6px;
}

body.course-396 #eej-panel .dt-num {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:var(--gold-primary);
  letter-spacing:-.01em;line-height:1;
  margin-bottom:8px;
  text-transform:uppercase;
}

body.course-396 #eej-panel .dt-title {
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  color:var(--navy-deep);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;
  margin:0 0 14px;
  max-width:42ch;
}

body.course-396 #eej-panel .dt-divider {
  height:2px;width:80px;
  background:linear-gradient(90deg,var(--gold-primary),var(--orange-warm),transparent);
  border-radius:2px;
}

body.course-396 #eej-panel .dt-progress {
  position:relative;z-index:2;
  background:rgba(43,58,94,.04);
  border-radius:14px;
  padding:14px 18px;
  margin-bottom:22px;
  border:1px solid rgba(43,58,94,.08);
}

body.course-396 #eej-panel .dt-progress-meta {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
  font-family:var(--font-sans);
}

body.course-396 #eej-panel .dt-progress-label {
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--navy-deep);
}

body.course-396 #eej-panel .dt-progress-counter {
  font-size:.7rem;font-weight:600;
  color:var(--brown-mid);
  letter-spacing:.06em;
}

body.course-396 #eej-panel .dt-bar {
  height:7px;border-radius:100px;overflow:hidden;
  background:rgba(43,58,94,.1);
  position:relative;
}

body.course-396 #eej-panel .dt-fill {
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal-primary),var(--teal-vivid));
  border-radius:100px;
  transition:width .65s var(--ease-out);
  box-shadow:0 0 10px rgba(42,140,140,.45);
}

body.course-396 #eej-panel .dt-pct {
  position:absolute;top:14px;right:18px;
  font-family:var(--font-display);font-weight:900;
  font-size:1.2rem;
  color:var(--teal-primary);
  letter-spacing:-.01em;
  pointer-events:none;
}

/* Sections list */
body.course-396 #eej-panel .dt-sections {
  position:relative;z-index:2;
  list-style:none;padding:0;margin:0 0 22px;
  display:flex;flex-direction:column;gap:8px;
}

body.course-396 #eej-panel .dt-section { list-style:none; padding:0; margin:0 }

body.course-396 #eej-panel .dt-section-btn {
  width:100%;
  display:flex;align-items:center;gap:14px;
  background:var(--cream-white);
  border:1.5px solid rgba(122,74,40,.16);
  border-radius:11px;
  padding:14px 18px;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-body);
  transition:all .25s var(--ease-out);
}

body.course-396 #eej-panel .dt-section-btn:hover {
  border-color:var(--gold-primary);
  background:var(--cream-warm);
  transform:translateX(3px);
  box-shadow:0 4px 14px rgba(212,184,122,.2);
}

body.course-396 #eej-panel .dt-section-btn:active { transform:translateX(2px) scale(.995) }

body.course-396 #eej-panel .dt-section-check {
  flex-shrink:0;
  width:26px;height:26px;border-radius:7px;
  border:2px solid rgba(122,74,40,.3);
  background:var(--cream-white);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--cream-white);
  transition:all .3s var(--ease-out);
}

body.course-396 #eej-panel .dt-section-check svg { width:16px;height:16px }

body.course-396 #eej-panel .dt-section.done .dt-section-check {
  background:var(--teal-primary);
  border-color:var(--teal-primary);
  box-shadow:0 0 0 4px rgba(42,140,140,.15);
}

body.course-396 #eej-panel .dt-section.next .dt-section-check {
  border-color:var(--orange-warm);
  background:var(--cream-white);
  box-shadow:0 0 0 4px rgba(217,148,58,.18);
  animation:eej-nextPulse 1.8s ease-in-out infinite;
}

@keyframes eej-nextPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(217,148,58,.18) }
  50%{ box-shadow:0 0 0 7px rgba(217,148,58,.3) }
}

body.course-396 #eej-panel .dt-section-body {
  flex:1;display:flex;flex-direction:column;gap:3px;
}

body.course-396 #eej-panel .dt-section-label {
  font-size:.95rem;
  color:var(--brown-dark);
  line-height:1.35;
}

body.course-396 #eej-panel .dt-section-status {
  font-family:var(--font-sans);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--brown-mid);
}

body.course-396 #eej-panel .dt-section.done .dt-section-label {
  color:var(--brown-mid);
  text-decoration:line-through;
  text-decoration-color:rgba(122,74,40,.4);
}

body.course-396 #eej-panel .dt-section.done .dt-section-status { color:var(--teal-primary) }

body.course-396 #eej-panel .dt-section.next .dt-section-status { color:var(--orange-burnt) }

/* Foot of detail panel */
body.course-396 #eej-panel .dt-foot {
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:14px;
  padding-top:18px;border-top:1px solid rgba(122,74,40,.16);
}

body.course-396 #eej-panel .dt-hint {
  font-family:var(--font-sans);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--brown-mid);
  text-align:center;
}

body.course-396 #eej-panel .dt-next-btn {
  align-self:center;
  background:var(--navy-deep) !important;color:var(--gold-primary) !important;
  border:1px solid var(--gold-primary);
  padding:14px 28px !important;
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem !important;
}

body.course-396 #eej-panel .dt-next-btn:hover {
  background:var(--teal-primary) !important;color:var(--cream-white) !important;
  border-color:var(--teal-primary);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(42,140,140,.4);
}

body.course-396 #eej-panel .dt-next-btn svg { width:14px;height:14px }

body.course-396 #eej-panel .dt-back-btn {
  align-self:center;
  background:var(--gold-primary) !important;color:var(--navy-deep) !important;
  padding:14px 28px !important;
  font-size:.78rem !important;
}

body.course-396 #eej-panel .dt-back-btn:hover {
  background:var(--gold-light) !important;
  transform:translateY(-1px);
}

body.course-396 #eej-panel .dt-complete-msg {
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg, rgba(42,140,140,.12), rgba(212,184,122,.12));
  border:1.5px solid var(--teal-primary);
  border-radius:14px;
  padding:18px 22px;
}

body.course-396 #eej-panel .dt-complete-msg .star-icon {
  width:42px;height:42px;color:var(--gold-primary);flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(212,184,122,.55));
}

body.course-396 #eej-panel .dt-complete-title {
  font-family:var(--font-display);font-weight:900;
  font-size:1.2rem;color:var(--navy-deep);line-height:1.1;margin-bottom:3px;
  text-transform:uppercase;letter-spacing:-.005em;
}

body.course-396 #eej-panel .dt-complete-sub {
  font-family:var(--font-body);font-size:.85rem;color:var(--brown-mid);
}

/* Celebration state · brief gold flash on the panel */
.detail-view.celebrating .dt-panel {
  animation: eej-dtCelebrate 1.7s ease-out;
}

@keyframes eej-dtCelebrate{
  0%{ box-shadow: 0 18px 48px rgba(43,58,94,.18), 0 4px 12px rgba(212,184,122,.18) }
  20%{ box-shadow: 0 18px 60px rgba(212,184,122,.55), 0 0 0 5px rgba(212,184,122,.4), inset 0 0 80px rgba(212,184,122,.15) }
  100%{ box-shadow: 0 18px 48px rgba(43,58,94,.18), 0 4px 12px rgba(212,184,122,.18) }
}

body.course-396 #eej-panel .detail-view.celebrating .dt-title {
  animation: eej-dtTitleGlow 1.7s ease-out;
}

@keyframes eej-dtTitleGlow{
  0%,100%{ color:var(--navy-deep) }
  40%{ color:var(--orange-burnt); text-shadow: 0 0 18px rgba(217,148,58,.4) }
}

/* Mobile tweaks */
@media (max-width:640px) {
  body.course-396 #eej-panel .dt-section-btn { padding:12px 14px; gap:11px }
  body.course-396 #eej-panel .dt-section-check { width:22px;height:22px }
  body.course-396 #eej-panel .dt-section-label { font-size:.86rem }
  body.course-396 #eej-panel .dt-pct { position:static; text-align:right; margin-top:4px; font-size:1rem }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}