/* ===== Death metal / cybersigilism: pestañas con espina, tarjeta rasgada, CTA de púas ===== */
:root{--spike:polygon(0 50%,6% 20%,3% 0,15% 14%,30% 0,40% 13%,50% 0,60% 13%,70% 0,85% 14%,97% 0,94% 20%,100% 50%,94% 80%,97% 100%,85% 86%,70% 100%,60% 87%,50% 100%,40% 87%,30% 100%,15% 86%,3% 100%,6% 80%)}

/* --- botón: emblema de metal con púas, plata que brilla en movimiento --- */
.btn{clip-path:var(--spike);padding:1.25rem 3.2rem;background:linear-gradient(100deg,#bdbdc4 0,#fff 30%,#9a9aa2 50%,#fff 70%,#bdbdc4 100%) 0 0/250% 100%;color:#050505;font-weight:700;letter-spacing:.16em;animation:sheen 5s linear infinite}
.btn:hover,.btn:not(.ghost):hover{background:linear-gradient(100deg,#fff,#fff);filter:drop-shadow(0 0 16px #fff8);animation:none}
.btn.ghost{background:#ffffff77;color:#eee;animation:none}
.btn.ghost::before{clip-path:var(--spike);background:#09090b}
.btn.ghost:hover{background:#fff;color:#050505}
.btn.ghost:hover::before{background:#fff}
@keyframes sheen{to{background-position:-250% 0}}

/* --- pestañas: texto mínimo + espina blanca en la activa --- */
.chips{gap:.2rem 1.8rem;border-bottom:1px solid var(--line)}
.chips button{clip-path:none;background:none!important;padding:.6rem .2rem 1rem;border:0;font:400 1.35rem "Pirata One",cursive;letter-spacing:.08em;text-transform:uppercase;color:#6f6f75;position:relative}
.chips button::before{display:none}
.chips button::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:9px;background:#fff;clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 6px #fff)}
.chips button:hover{color:#ddd}
.chips button[aria-pressed=true]{color:#fff;text-shadow:0 0 14px #fff6}
.chips button[aria-pressed=true]::after{transform:scaleX(1);animation:thorn 2.4s ease-in-out infinite .4s}
@keyframes thorn{50%{filter:drop-shadow(0 0 12px #fff)}}

/* --- tarjeta: negro granulado, bordes rasgados, esquinas con telaraña --- */
.style{position:relative;border:0;padding:3rem 3.2rem;gap:2.6rem;background:url(img/noise.svg),radial-gradient(ellipse at 30% 20%,#0d0d0f,#020202 70%);animation:grit 1.2s steps(5) infinite}
@keyframes grit{20%{background-position:-30px 14px,0 0}40%{background-position:22px -40px,0 0}60%{background-position:-12px 50px,0 0}80%{background-position:44px 8px,0 0}}
.style::before,.style::after{display:none}
.style .cn{position:absolute;width:104px;height:104px;background:url(img/corner.svg) 0 0/100% 100%;pointer-events:none;z-index:3;filter:drop-shadow(0 0 5px #fff3);transform-origin:center;animation:sway 7s ease-in-out infinite}
.style .cn.tr{top:6px;right:6px;transform:scaleX(-1)}
.style .cn.tl{top:6px;left:6px}
.style .cn.bl{bottom:6px;left:6px;transform:scaleY(-1)}
.style .cn.br{bottom:6px;right:6px;transform:scale(-1)}
.style .cn.tr,.style .cn.br{animation-delay:-2.5s}
.style .cn.bl{animation-delay:-4.5s}
@keyframes sway{50%{filter:drop-shadow(0 0 10px #fff6) brightness(1.15)}}

/* foto: blanco y negro con bordes de tinta salpicada, respirando */
.style img{box-shadow:none;filter:grayscale(1) contrast(1.25) brightness(.95);-webkit-mask:url(img/ink-mask.svg) center/100% 100% no-repeat;mask:url(img/ink-mask.svg) center/100% 100% no-repeat;animation:breathe 9s ease-in-out infinite alternate;aspect-ratio:4/5;object-fit:cover}
.style img.flip{animation:flipIn .65s cubic-bezier(.2,.8,.2,1),breathe 9s 0.65s ease-in-out infinite alternate}
@keyframes breathe{to{filter:grayscale(1) contrast(1.4) brightness(1.08)}}

/* texto */
.style h3{font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:.06em;text-shadow:0 0 22px #fff3;margin-bottom:.8rem}
.style p{color:#9b9ba1;max-width:36ch}

@media(prefers-reduced-motion:reduce){.btn,.style,.style .cn,.style img,.chips button[aria-pressed=true]::after{animation:none!important}}
@media(max-width:700px){.style{padding:1.6rem 1.2rem 2rem}.style .cn{width:96px;height:96px}.chips{gap:.2rem 1.2rem}.chips button{font-size:1.15rem}}
.style{clip-path:polygon(0.0% 11px,3.85% 5px,7.69% 11px,11.54% 11px,15.38% 5px,19.23% 5px,23.08% 3px,26.92% 3px,30.77% 5px,34.62% 11px,38.46% 14px,42.31% 5px,46.15% 3px,50.0% 0px,53.85% 11px,57.69% 7px,61.54% 3px,65.38% 0px,69.23% 5px,73.08% 14px,76.92% 14px,80.77% 0px,84.62% 5px,88.46% 11px,92.31% 11px,96.15% 14px,100.0% 14px,100% 38%,99.2% 55%,100% 78%,100.0% calc(100% - 6px),96.15% calc(100% - 15px),92.31% calc(100% - 4px),88.46% calc(100% - 6px),84.62% calc(100% - 0px),80.77% calc(100% - 6px),76.92% calc(100% - 0px),73.08% calc(100% - 0px),69.23% calc(100% - 0px),65.38% calc(100% - 4px),61.54% calc(100% - 4px),57.69% calc(100% - 6px),53.85% calc(100% - 0px),50.0% calc(100% - 12px),46.15% calc(100% - 8px),42.31% calc(100% - 12px),38.46% calc(100% - 6px),34.62% calc(100% - 4px),30.77% calc(100% - 6px),26.92% calc(100% - 4px),23.08% calc(100% - 15px),19.23% calc(100% - 8px),15.38% calc(100% - 12px),11.54% calc(100% - 0px),7.69% calc(100% - 15px),3.85% calc(100% - 0px),0.0% calc(100% - 12px),0.8% 70%,0 52%,0.6% 30%)}

/* móvil: nada debe ensanchar la página */
html,body{overflow-x:clip}
@media(max-width:700px){.roster li:hover,.roster li.on{transform:none;padding-left:.8rem}}
.nav{background:#050505d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ffffff12}