/* Carnet virtual de aficionado / socio */
.cv { --c1: #4F46E5; --c2: #F0B93A; --on: #fff; --bd: #F5C542; --bdon: #1A1200; position: relative; isolation: isolate; width: 100%; max-width: 430px; aspect-ratio: 1.586 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 18px 20px; border-radius: 24px; overflow: hidden; color: var(--on); background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 55%, #000)); box-shadow: 0 34px 50px -30px rgba(0, 0, 0, .75); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cv:hover { transform: translateY(-4px) rotate(-.6deg); }
.cv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 220px at 92% -10%, rgba(255, 255, 255, .3), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px); }
.cv::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 33%; height: 4px; z-index: -1; background: linear-gradient(90deg, transparent, var(--c2), transparent); opacity: .85; transform: rotate(-8deg); }
.cv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cv-club { display: flex; align-items: center; gap: 10px; min-width: 0; } .cv-club b { font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; font-weight: 900; color: var(--c1); background: rgba(255, 255, 255, .94); } .cv-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cv-kind { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.cv-mid { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cv-av { flex: none; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 900; font-size: 1.5rem; background: rgba(255, 255, 255, .2); border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .6); } .cv-av img { width: 100%; height: 100%; object-fit: cover; }
.cv-name { font-weight: 900; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; } .cv-user { margin-top: 2px; font-size: .8rem; opacity: .85; }
.cv-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cv-num small { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .8; } .cv-num b { font: 800 1.02rem/1.25 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.cv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 99px; font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--bdon); background: var(--bd); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .7); }
.cv-badge.pend { color: #fff; background: rgba(255, 255, 255, .18); border: 1px dashed rgba(255, 255, 255, .75); box-shadow: none; }
@media (max-width: 420px) { .cv { padding: 14px 15px; border-radius: 20px; } .cv-av { width: 50px; height: 50px; font-size: 1.2rem; } .cv-name { font-size: 1rem; } .cv-logo { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .cv, .cv:hover { transition: none; transform: none; } }