/* ── La moneda (medalla de un lugar): cobre, plata y oro. El metal es contenido, como una foto: no cuenta como segundo acento. ── */
.moneda { --t: 160px; width: var(--t); height: var(--t); perspective: 900px; position: relative; flex: none; cursor: pointer; margin: 0 auto; -webkit-tap-highlight-color: transparent; }
.moneda .giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.moneda.volteada .giro { transform: rotateY(180deg); }
.moneda .cara { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.22), rgba(0,0,0,0) 45%),
    conic-gradient(from 200deg, var(--m1), var(--m2), var(--m1), var(--m0), var(--m1), var(--m3), var(--m1), var(--m0), var(--m1));
  box-shadow: 0 calc(var(--t) * .05) calc(var(--t) * .12) rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18); }
.moneda .dorso { transform: rotateY(180deg); }
.moneda svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.moneda .brillo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.moneda .brillo::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); }
.moneda.brilla .brillo::after { animation: brillo 2.6s ease-in-out .3s infinite; }
@keyframes brillo { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .moneda .giro { transition: none; } .moneda.brilla .brillo::after { animation: none; } }
.m-cobre { --m0: #6B3418; --m1: #B4693C; --m2: #D98E5E; --m3: #F4C29C; }
.m-plata { --m0: #5F656B; --m1: #AEB4BA; --m2: #D3D8DD; --m3: #F7F9FA; }
.m-oro   { --m0: #7D5A12; --m1: #C9982E; --m2: #E6BC4F; --m3: #FFE7A3; }
.m-nada  { --m0: #9A958C; --m1: #E4E0D8; --m2: #ECE9E2; --m3: #F7F5F1; }
.m-nada .cara { box-shadow: none; background: var(--surf2); border: 1.6px dashed var(--muted2); }
.moneda .anillo { position: absolute; inset: calc(var(--t) * -.09); pointer-events: none; }
.moneda .anillo circle { fill: none; stroke-width: 3; stroke-linecap: round; }

.moneda .relieve .pieza > *, .moneda .relieve .pieza { fill: var(--m1); }
.moneda .relieve .sombra { fill: var(--m0); opacity: .95; }
.moneda .relieve .luz { fill: var(--m3); opacity: .9; }
.moneda .relieve .hueco { fill: var(--m0) !important; opacity: .55; }
.moneda .relieve .linea { fill: none !important; stroke: var(--m0); stroke-width: 1.4; }
.moneda .relieve .luz .linea { stroke: var(--m3); }
.moneda .relieve text { font-family: Outfit, system-ui, sans-serif; }