@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* Carnet de Socio Peyote en Mi vestidor. Proporción de tarjeta de crédito (1.586:1), hueso frío, banda negra. */
.cn-slot{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Con el carnet, la columna crece un poco y los números de al lado ya no se estiran hasta abajo */
.vx-top-grid:has(.cn-slot){grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start}
@media(max-width:760px){.vx-top-grid:has(.cn-slot){grid-template-columns:1fr}}
.cn-wrap{perspective:1600px}
.cn-card{position:relative;width:100%;aspect-ratio:1.586/1;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);cursor:pointer;outline:0}
.cn-card.is-flip{transform:rotateY(180deg)}
.cn-card:focus-visible{outline:3px solid var(--vx-or,#ff8346);outline-offset:4px;border-radius:14px}
.cn-face{position:absolute;inset:0;overflow:hidden;border-radius:14px;box-shadow:0 18px 40px rgba(21,20,18,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size}
.cn-front{background:#eeede8;color:#151412}
.cn-band{position:absolute;top:0;left:0;right:0;height:22%;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#151412}
.cn-band img{width:auto;height:56%}
.cn-band span{color:#f7f6f2;font:600 2.1cqw "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em}
.cn-stripe{position:absolute;top:22%;left:0;right:0;height:3.6%;background:linear-gradient(90deg,var(--t1) 0 33.3%,var(--t2) 33.3% 66.6%,var(--t3) 66.6% 100%)}
.cn-rib{position:absolute;top:25.6%;bottom:0;left:0;width:2.2%;background:linear-gradient(180deg,var(--t1) 0 33.3%,var(--t2) 33.3% 66.6%,var(--t3) 66.6% 100%)}
.cn-wm{position:absolute;top:30%;right:-2%;color:var(--t1);opacity:.07;font:400 20cqw/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.cn-lvl{position:absolute;top:28%;right:4%;padding:.9cqw 1.5cqw;border:.3cqw solid currentColor;color:#151412;font:600 2cqw "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-4deg)}
.cn-lvl.is-hot{color:#ff8346}
.cn-who{position:absolute;top:33%;left:5%;right:34%}
.cn-k{color:#77746c;font:600 1.9cqw "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
.cn-name{margin-top:.4cqw;font:400 7.3cqw/.95 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-team{margin-top:.8cqw;font:700 2.5cqw Raleway,Arial,sans-serif}
.cn-num{position:absolute;bottom:7%;left:5%;display:flex;align-items:flex-end;gap:3.4cqw}
.cn-num div{display:flex;flex-direction:column}
.cn-v{font:400 5.8cqw/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;font-variant-numeric:tabular-nums}
.cn-num .cn-k{font-size:1.7cqw}
.cn-peyo{position:absolute;right:4%;bottom:6%;width:auto;height:56%;opacity:.95}
.cn-back{display:flex;flex-direction:column;gap:2cqw;padding:6%;background:#151412;color:#f7f6f2;transform:rotateY(180deg)}
.cn-bt{font:400 5cqw/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;text-transform:uppercase}
.cn-back ul{display:flex;flex-direction:column;gap:1cqw;margin:0;padding-left:4cqw;font:600 2.7cqw/1.35 Raleway,Arial,sans-serif}
.cn-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;margin-top:auto}
.cn-code{flex:1;max-width:58%;height:7cqw;background:repeating-linear-gradient(90deg,#f7f6f2 0 2px,transparent 2px 4px,#f7f6f2 4px 5px,transparent 5px 9px,#f7f6f2 9px 12px,transparent 12px 14px);opacity:.85}
.cn-sig{color:#a9a69e;font:600 1.7cqw "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-align:right;text-transform:uppercase}
/* VIP: negro con dorado */
.cn-card.is-vip .cn-front{background:#121110;color:#f1e7cf}
.cn-card.is-vip .cn-front::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(214,181,106,.08) 0 2px,transparent 2px 9px);pointer-events:none}
.cn-card.is-vip .cn-band{background:linear-gradient(100deg,#8a6a2f,#e2c47f 40%,#a8843e 60%,#e9d39a)}
.cn-card.is-vip .cn-band span{color:#121110}
.cn-card.is-vip .cn-name{background:linear-gradient(100deg,#c9a45a,#f3e2ae 45%,#b8923f);-webkit-background-clip:text;background-clip:text;color:transparent}
.cn-card.is-vip .cn-k{color:#a89a7c}
.cn-card.is-vip .cn-team{color:#e8dcc0}
.cn-card.is-vip .cn-lvl{color:#e2c47f}
.cn-card.is-vip .cn-wm{color:#e2c47f;opacity:.05}
.cn-share{margin-top:12px}
.cn-hint{margin:8px 0 0;color:var(--vx-mute,#5f5c55);font:500 11px "IBM Plex Mono",ui-monospace,monospace;text-align:center}
/* Lo que le falta para subir */
.cn-next{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background:var(--vx-bone,#E7E6E1)}
.cn-next b{font:800 15px/1.2 Raleway,Arial,sans-serif}
.cn-next span{color:var(--vx-mute,#5f5c55);font:600 12.5px Raleway,Arial,sans-serif}
.cn-track{height:8px;border-radius:999px;background:#fff;overflow:hidden}
.cn-track i{display:block;height:100%;border-radius:inherit;background:#ff8346}
.cn-next.is-top{background:#151412;color:#f1e7cf}.cn-next.is-top span{color:#cfccc4}
/* El sello cae la primera vez que ve una categoría nueva */
.cn-lvl.is-stamp{animation:cn-stamp .55s cubic-bezier(.3,1.4,.5,1) .35s both}
@keyframes cn-stamp{0%{opacity:0;transform:rotate(-16deg) scale(2.6)}60%{opacity:1;transform:rotate(-3deg) scale(.92)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.cn-card{transition:none}.cn-lvl.is-stamp{animation:none}}