/* ============================================================
   MEDALLAS · vitrina de medallones acuñados (Fase 2 · doc 11)
   Medallón = MONEDA acuñada porteada del monolito (13 jul · Rodrigo):
   oro con volumen 3D, aro interior y destello que barre (todo CSS).
   soma-medals.js arma la estructura (coinHTML) con el glifo PROPIO de
   cada logro al centro; aquí viven los estados locked/unlocked.
   Se monta en medallas.html sobre el patrón .sx. La celebración modal
   (misma moneda) vive en css/celebracion.css.
   ============================================================ */

/* ── Hero: anillo de progreso + texto ── */
.med-hero{
  display:flex; align-items:center; gap:20px; position:relative; overflow:hidden;
  background:radial-gradient(ellipse 120% 130% at 82% -10%, #16273D 0%, #0F2035 52%, #0A1320 100%);
  border:1px solid rgba(var(--ent-gold-rgb),.30);
  box-shadow:0 24px 54px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(var(--ent-gold-rgb),.16);
  padding:22px; margin-bottom:30px;
}
.med-hero::before{ content:''; position:absolute; left:7px; top:7px; right:7px; bottom:7px; border:1px solid rgba(var(--ent-gold-rgb),.12); pointer-events:none; }

.med-ring{
  flex:0 0 auto; width:94px; height:94px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ent-gold) var(--mp,0%), rgba(var(--ent-gold-rgb),.13) 0);
  transition:background 1s cubic-bezier(.4,0,.2,1);
}
.med-ring::before{ content:''; position:absolute; left:7px; top:7px; right:7px; bottom:7px; border-radius:50%; background:radial-gradient(circle at 50% 34%, #16273D, #0B1623); border:1px solid rgba(var(--ent-gold-rgb),.20); }
.med-ring-in{ position:relative; z-index:1; text-align:center; }
.med-ring-num{ display:block; font-family:var(--font-serif); font-size:22px; color:var(--ent-cream); line-height:1; }
.med-ring-num i{ font-style:normal; font-size:14px; color:rgba(var(--ent-gold-rgb),.6); }
.med-ring-lbl{ display:block; font-family:var(--font-sans); font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--ent-gold); font-weight:600; margin-top:5px; }

.med-hero-tx{ flex:1; min-width:0; }
.med-hero-eyebrow{ font-family:var(--font-sans); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ent-gold); font-weight:600; margin:0 0 7px; }
.med-hero-title{ font-family:var(--font-serif); font-weight:400; font-size:18px; line-height:1.2; color:var(--ent-cream); margin:0 0 7px; }
.med-hero-desc{ font-family:var(--font-sans); font-size:12px; line-height:1.5; color:rgba(var(--ent-ink-rgb),.6); margin:0 0 9px; }
.med-hero-pct{ font-family:var(--font-sans); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ent-gold); font-weight:600; margin:0; }

/* ── Divisor de categoría ── */
.med-cat{ display:flex; align-items:baseline; gap:9px; margin:30px 0 14px; }
.med-cat-glifo{ font-size:14px; color:var(--ent-gold); line-height:1; }
.med-cat-name{ font-family:var(--font-sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ent-gold); }
.med-cat-sub{ font-family:var(--font-sans); font-size:11px; color:rgba(var(--ent-ink-rgb),.42); flex:1; min-width:0; }
.med-cat-count{ font-family:var(--font-sans); font-size:10px; letter-spacing:.08em; color:rgba(var(--ent-gold-rgb),.7); font-weight:600; }

/* ── Grilla ── */
.med-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 12px; }
@media (min-width:600px){ .med-grid{ grid-template-columns:repeat(3,1fr); } }

/* ── Tarjeta / medallón · MONEDA acuñada (porte del monolito · 13 jul · Rodrigo) ── */
.medal{ text-align:center; display:flex; flex-direction:column; align-items:center; padding:6px 4px; }
.med-coin-wrap{ position:relative; width:70px; height:70px; margin:0 auto 12px; }

/* halo que respira detrás · solo desbloqueadas */
.medal.unlocked .med-coin-wrap::before{
  content:''; position:absolute; left:-14%; top:-14%; width:128%; height:128%;
  border-radius:50%; background:radial-gradient(circle, rgba(var(--ent-gold-rgb),.30), transparent 62%);
  z-index:0; animation:medBreath 4.6s ease-in-out infinite; pointer-events:none;
}
@keyframes medBreath{ 0%,100%{ opacity:.35; } 50%{ opacity:.8; } }

.med-coin{
  position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .25s ease;
}
.medal.unlocked .med-coin:hover{ transform:translateY(-3px); }

/* moneda desbloqueada · oro con volumen */
.medal.unlocked .med-coin{
  background:radial-gradient(circle at 38% 30%, #FBEFD0 0%, #E7CE97 42%, #C9A968 72%, #9A7838 100%);
  border:1px solid rgba(var(--ent-gold-rgb),.85);
  box-shadow:0 8px 18px -8px rgba(var(--ent-gold-rgb),.7), inset 0 1.5px 2px rgba(255,255,255,.65), inset 0 -4px 8px rgba(120,90,40,.42);
}
/* moneda bloqueada · navy apagado */
.medal.locked .med-coin{
  background:radial-gradient(circle at 38% 32%, #17263C 0%, #0D1827 92%);
  border:1px solid rgba(var(--ent-gold-rgb),.16);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(var(--ent-gold-rgb),.08);
}
/* aro interior */
.med-coin::after{
  content:''; position:absolute; left:4px; top:4px; right:4px; bottom:4px;
  border-radius:50%; border:1px solid rgba(255,255,255,.32); pointer-events:none;
}
.medal.locked .med-coin::after{ border-color:rgba(var(--ent-gold-rgb),.10); }
/* destello que barre · solo desbloqueadas */
.medal.unlocked .med-coin::before{
  content:''; position:absolute; top:0; left:-130%; width:62%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg); animation:medalShine 6.5s ease-in-out infinite; pointer-events:none;
}
@keyframes medalShine{ 0%{ left:-130%; } 24%,100%{ left:170%; } }

/* glifo PROPIO del logro */
.med-coin-g{ position:relative; z-index:2; font-family:var(--font-sans); font-size:26px; line-height:1; }
.medal.unlocked .med-coin-g{ color:#5A4620; }
.medal.locked .med-coin-g{ color:rgba(var(--ent-gold-rgb),.42); }

/* candado · esquina (sobre el wrap, no se recorta) */
.medal.locked .med-coin-wrap::after{
  content:''; position:absolute; right:0; bottom:0; z-index:3; width:20px; height:20px; border-radius:50%;
  background:#0B1623 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A968' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/11px 11px no-repeat;
  border:1px solid rgba(var(--ent-gold-rgb),.32); box-shadow:0 2px 5px rgba(0,0,0,.5);
}

/* textos */
.med-name{ font-family:var(--font-serif); font-weight:400; font-size:12.5px; line-height:1.25; color:var(--ent-cream); margin-bottom:3px; }
.medal.locked .med-name{ color:rgba(var(--ent-ink-rgb),.5); }
.med-desc{ font-family:var(--font-sans); font-size:10px; line-height:1.4; color:rgba(var(--ent-ink-rgb),.42); }
.med-status{ font-family:var(--font-sans); font-size:8px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-top:6px; }
.medal.unlocked .med-status{ color:var(--ent-gold); }
.medal.locked .med-status{ color:rgba(var(--ent-ink-rgb),.3); }

@media (prefers-reduced-motion:reduce){
  .medal.unlocked .med-coin::before,
  .medal.unlocked .med-coin-wrap::before{ animation:none; }
  .med-ring{ transition:none; }
}

/* ── SENDA · recorrido cronológico (10 ago · rediseño "Progreso Vivo") ──
   Vista principal de progreso; la vitrina sobrevive abajo como colección. */
.sd-rail{ position:relative; margin:6px 0 2px; }
.sd-node{ position:relative; padding:0 0 22px 48px; min-height:32px; }
.sd-node::before{ content:''; position:absolute; left:17px; top:4px; bottom:0; width:1px; background:rgba(201,169,104,.2); }
.sd-node:last-child::before{ display:none; }
.sd-coin, .sd-mark{ position:absolute; top:0; }
.sd-coin{
  left:2px; width:32px; height:32px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
}
.sd-coin.on{
  color:#0B1623;
  background:radial-gradient(circle at 38% 30%,#FBEFD0,#E7CE97 45%,#C9A968 78%,#9A7838);
  border:1px solid rgba(201,169,104,.85);
  box-shadow:0 3px 8px -3px rgba(201,169,104,.6), inset 0 1.5px 2px rgba(255,255,255,.5);
}
.sd-coin.off{ color:rgba(201,169,104,.5); background:radial-gradient(#1B2E48,#0D1827); border:1px solid rgba(201,169,104,.28); }
.sd-mark{ left:9px; top:1px; width:18px; height:18px; border:1px solid rgba(201,169,104,.7); transform:rotate(45deg); background:transparent; }
.sd-eval .sd-mark{ border-style:dashed; border-color:rgba(201,169,104,.5); }
.sd-name{ display:block; font-family:var(--font-serif); font-size:15px; line-height:1.2; color:var(--ent-cream); }
.sd-medal.off .sd-name{ color:rgba(244,236,217,.55); }
.sd-eyebrow{ display:block; font-family:var(--font-sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ent-gold); }
.sd-txt{ font-family:var(--font-sans); font-size:12px; line-height:1.5; color:rgba(255,255,255,.5); margin:2px 0 0; text-wrap:pretty; }
.sd-fecha{ display:block; font-family:var(--font-sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(232,207,148,.6); margin-top:3px; }
.sd-abre{ display:block; font-family:var(--font-sans); font-size:10.5px; font-weight:600; letter-spacing:.05em; color:var(--ent-gold-bright); margin-top:3px; }
.sd-req{ display:block; font-family:var(--font-sans); font-size:11.5px; line-height:1.5; color:var(--ent-gold-bright); margin-top:4px; }
.sd-here{ padding:0 0 22px 48px; }
.sd-here-dot{
  position:absolute; left:10px; top:2px; width:14px; height:14px; border-radius:50%;
  background:#E8CF94; box-shadow:0 0 0 0 rgba(201,169,104,.42); animation:sdHere 2.4s ease-out infinite;
}
.sd-here-chip{
  display:inline-block; font-family:var(--font-sans); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--ent-gold-bright);
  border:1px solid rgba(201,169,104,.4); border-radius:var(--radius); padding:4px 10px;
}
@keyframes sdHere{ 0%{ box-shadow:0 0 0 0 rgba(201,169,104,.42); } 70%,100%{ box-shadow:0 0 0 9px rgba(201,169,104,0); } }
.sd-col-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:6px;
  font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ent-gold-bright); background:transparent; border:none;
  border-top:1px solid rgba(201,169,104,.14); padding:16px 0 4px; cursor:pointer;
}
.sd-col-btn b{ color:var(--ent-cream); font-weight:700; }
.sd-col-btn span{ display:inline-block; transition:transform .2s ease; }
.sd-col-btn.open span{ transform:rotate(90deg); }
.sd-col-wrap{ margin-top:12px; }
@media (prefers-reduced-motion:reduce){ .sd-here-dot{ animation:none; } }

/* ═══ Avatar héroe de "Mi proceso" (15 ago · Rodrigo) ═══
   Copia namespaced (.mp-*) de la neurona del dashboard. Fuente de la verdad:
   home.css/index.html — si cambia el avatar, sincronizar aquí. Así el dashboard
   queda 100% intacto. Las clases .nv-* y keyframes son idénticas al inicio. */
/* aire (16 ago · Rodrigo: "se ve apretado") — más respiro vertical en el hero */
.mp-hero{ text-align:center; padding:12px 8px 32px; border-bottom:1px solid rgba(var(--ent-gold-rgb),.14); margin-bottom:18px; }
.mp-eyebrow{ display:block; font-family:var(--font-sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--ent-gold); margin-bottom:12px; }
.mp-neuron{ width:172px; height:172px; margin:6px auto 16px; }
.mp-neuron svg{ width:100%; height:100%; display:block; overflow:visible; }
.mp-name{ font-family:var(--font-serif); font-weight:400; font-size:30px; line-height:1.1; color:var(--ent-gold-bright); margin:0 0 12px; }
.mp-desc{ font-family:var(--font-sans); font-size:13px; line-height:1.6; color:rgba(var(--ent-ink-rgb),.6); margin:0 auto 24px; max-width:340px; text-wrap:balance; }
.mp-racha{ font-family:var(--font-sans); font-size:12px; line-height:1.5; color:rgba(var(--ent-ink-rgb),.5); margin:18px 0 0; text-wrap:balance; }
.nv-t2,.nv-t3,.nv-t4,.nv-myelin,.nv-sats,.nv-field,.nv-signals{ opacity:0; transition:opacity .6s ease; }
.mp-neuron.has-d2 .nv-t2{ opacity:1; animation:navBranch 4.6s ease-in-out infinite; }
.mp-neuron.has-d3 .nv-t3{ opacity:1; animation:navBranch 4.6s ease-in-out .9s infinite; }
.mp-neuron.has-d4 .nv-t4{ opacity:1; animation:navBranch 4.6s ease-in-out 1.7s infinite; }
@keyframes navBranch{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.mp-neuron.has-myelin .nv-myelin{ opacity:1; }
.mp-neuron.has-sats .nv-sats{ opacity:1; }
.mp-neuron.has-field .nv-field{ opacity:1; }
.mp-neuron.has-sig.mov .nv-signals{ opacity:1; }
.nv-core{ transform-box:fill-box; transform-origin:center; animation:navCore 4.2s ease-in-out infinite; will-change:transform, filter; }
.nv-core-ring{ transform-box:fill-box; transform-origin:center; animation:navPing 2.9s ease-out infinite; }
@keyframes navCore{
  0%,100%{ transform:scale(.88); filter:drop-shadow(0 0 3px rgba(255,246,226,.4)); }
  50%{ transform:scale(1.16); filter:drop-shadow(0 0 12px rgba(232,207,148,.95)); }
}
@keyframes navPing{ 0%{ transform:scale(.7); stroke-opacity:.6; } 100%{ transform:scale(2.7); stroke-opacity:0; } }
.nv-field{ transform-box:fill-box; transform-origin:center; }
.mp-neuron.has-field .nv-field{ animation:navBreath 6s ease-in-out infinite; }
@keyframes navBreath{ 0%,100%{ transform:scale(.92); opacity:.6; } 50%{ transform:scale(1.05); opacity:1; } }
.mp-neuron.has-myelin .nv-myelin path{ animation:navMyelin 2.2s linear infinite; }
@keyframes navMyelin{ to{ stroke-dashoffset:-18; } }
.nv-ring{ fill:none; stroke:#E8CF94; stroke-width:1; stroke-opacity:.6; opacity:0; transform-box:fill-box; transform-origin:center; }
.mp-neuron.has-sats .nv-ring{ animation:navRing 2.6s ease-out infinite; }
.mp-neuron.has-sats .nv-sat:nth-child(2) .nv-ring{ animation-delay:.7s; }
.mp-neuron.has-sats .nv-sat:nth-child(3) .nv-ring{ animation-delay:1.3s; }
.mp-neuron.has-sats .nv-sat:nth-child(4) .nv-ring{ animation-delay:1.9s; }
@keyframes navRing{ 0%{ opacity:.55; transform:scale(.5); } 100%{ opacity:0; transform:scale(1.5); } }
@media (prefers-reduced-motion:reduce){ .mp-neuron *{ animation:none !important; } .mp-neuron .nv-signals{ opacity:0 !important; } }

/* ═══ Barra de progreso a la siguiente etapa · "Mi proceso" (15 ago) ═══
   Premium: número serif en oro, riel oscuro con filo, relleno con gradiente
   dorado + glow + brillo que recorre (sheen), y sube al cargar. */
.mp-prog{ max-width:300px; margin:6px auto 6px; }
.mp-prog-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:13px; }
.mp-prog-pct{ font-family:var(--font-serif); font-size:23px; line-height:1; color:var(--ent-gold-bright); font-variant-numeric:tabular-nums; }
.mp-prog-to{ font-family:var(--font-sans); font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:rgba(var(--ent-gold-rgb),.7); text-align:right; }
.mp-bar{ height:8px; border-radius:99px; background:rgba(5,11,20,.55); border:1px solid rgba(var(--ent-gold-rgb),.22); box-shadow:inset 0 1px 3px rgba(0,0,0,.55); overflow:hidden; }
.mp-bar-fill{ width:0; height:100%; border-radius:99px; position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--ent-gold) 0%, var(--ent-gold-bright) 100%);
  box-shadow:0 0 10px rgba(var(--ent-gold-rgb),.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:width 1.1s cubic-bezier(.22,.61,.36,1); }
.mp-bar-fill::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation:mpSheen 3.4s ease-in-out infinite; animation-delay:1.1s; }
@keyframes mpSheen{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(220%); } }
.mp-prog-nums{ display:flex; justify-content:space-between; margin-top:12px; font-family:var(--font-sans); font-size:10px; letter-spacing:.04em; color:rgba(var(--ent-ink-rgb),.42); font-variant-numeric:tabular-nums; }
.mp-prog-max .mp-prog-nums{ justify-content:center; }
@media (prefers-reduced-motion:reduce){ .mp-bar-fill{ transition:none; } .mp-bar-fill::after{ animation:none; opacity:0; } }