/* Gemelo 3D: escenario oscuro elegante dentro de la app clara */
.gemelo { position: relative; margin: 16px 0; border-radius: var(--radio); overflow: hidden; background: radial-gradient(120% 80% at 50% 40%, #2b2a27 0%, #1E1E1C 60%); min-height: 220px; }
.gemelo canvas { display: block; width: 100%; height: auto; }
.gemelo-fase { position: absolute; top: 14px; left: 18px; margin: 0; color: #F7F5F0; font: 400 24px var(--serif); }
.gemelo-etiqueta { position: absolute; right: 14px; top: 14px; margin: 0; padding: 8px 16px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .4s; }
.gemelo-etiqueta.mal { background: var(--mal); }
.gemelo-etiqueta.bien { background: var(--ok); }
.gemelo-credito { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: rgba(247,245,240,.45); font-size: 11px; }
.gemelo-vacio { color: #F7F5F0; text-align: center; padding: 80px 20px; margin: 0; }