/* Moneda 3D de Pixeleros Coins (coins.html + js/coin3d.js). */
.cp-hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tit moneda" "lema moneda" "txt moneda" "act moneda"; column-gap: 32px; align-items: center; }
.cp-hero h1 { grid-area: tit; align-self: end; overflow-wrap: anywhere; }
.cp-hero .cp-lema { grid-area: lema; align-self: start; }
.cp-hero .cp-hero-txt { grid-area: txt; }
.cp-hero .cc-actions { grid-area: act; }

.cp-moneda {
  --c3d: 248px;
  grid-area: moneda; position: relative; width: var(--c3d); height: var(--c3d); justify-self: center;
  border-radius: 50%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.cp-moneda::before { /* halo cálido/violeta detrás de la moneda */
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(251, 191, 36, 0.2), rgba(124, 58, 237, 0.16) 56%, transparent 74%);
}
.cp-moneda:focus-visible { outline: 2px solid var(--hx-focus, #c4b5fd); outline-offset: 6px; }
.cp-moneda canvas, .cp-moneda .c3d-plano { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-moneda .c3d-plano { display: grid; place-items: center; padding: 3%; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.cp-moneda .c3d-plano[hidden] { display: none; }

@media (max-width: 720px) {
  .cp-hero { grid-template-areas: "tit moneda" "lema moneda" "txt txt" "act act"; column-gap: 10px; padding-left: 16px; padding-right: 16px; }
  .cp-hero h1 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .cp-moneda { --c3d: clamp(144px, 41vw, 172px); }
}

/* Mi cuenta › Mis Coins: la misma moneda a la derecha del encabezado (pedido del dueño 2026-10-08). */
.cv-page-head--moneda { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick moneda" "tit moneda" "txt moneda"; column-gap: 24px; align-items: center; }
.cv-page-head--moneda > .product-kicker { grid-area: kick; }
.cv-page-head--moneda > h1 { grid-area: tit; }
.cv-page-head--moneda > .cv-head-txt { grid-area: txt; }
.cv-page-head--moneda > .cp-moneda { --c3d: 150px; grid-area: moneda; margin: -22px 8px -22px 0; }
@media (max-width: 720px) {
  .cv-page-head--moneda { column-gap: 10px; }
  .cv-page-head--moneda > .cp-moneda { --c3d: 92px; margin: -4px 0; }
}