/* Paleta tomada del logo: negro, carbón y plata/hueso */
:root{--bg:#050505;--bg2:#0f0f11;--line:#ffffff1f;--fg:#eeeeee;--mut:#8d8d92;--silver:linear-gradient(135deg,#fff,#9a9aa0 45%,#e8e8ea 70%,#6c6c72)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.65 Inter,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo{font-family:"Pirata One",cursive;font-weight:400;letter-spacing:.03em;text-transform:uppercase}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:linear-gradient(#050505ee,#05050500)}
.logo{font-size:1.2rem}.logo span{margin-left:.4em;color:var(--mut)}
.nav nav{display:flex;gap:1.4rem;font-size:.9rem;color:var(--mut)}
.nav nav a:hover{color:#fff}
.hero{position:relative;min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:6rem 5vw 4rem;overflow:hidden;
 background:radial-gradient(ellipse at 50% 40%,#1b1b1f 0,var(--bg) 70%)}
#gl{position:absolute;inset:0;width:100%;height:100%}
.hero>*:not(canvas){position:relative;z-index:1;pointer-events:none}.hero .cta a{pointer-events:auto}
.eyebrow{letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;color:var(--mut)}
h1{font-size:clamp(3.6rem,13vw,9rem);line-height:1.05;margin:.4em 0;text-shadow:0 10px 50px #000}
h1 em{display:block;font-style:normal;font-family:"Pirata One",cursive;font-weight:900;letter-spacing:.02em;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 24px #ffffff30)}
.tag{font-size:1.2rem;color:#c8c8cc;max-width:30ch;text-shadow:0 2px 20px #000}
.cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.btn{display:inline-block;padding:.85rem 1.8rem;background:#eee;color:#050505;border:1px solid #eee;font:600 .9rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.btn:hover{background:#fff;box-shadow:0 0 28px #ffffff55}
.btn.ghost{background:none;color:var(--fg);border-color:#ffffff55}.btn.ghost:hover{border-color:#fff;box-shadow:none}
.wrap{max-width:1000px;margin:auto;padding:5rem 5vw}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.5rem}
h2::after{content:"";display:block;width:60px;height:2px;background:var(--silver);margin-top:.6rem}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center}
.split p{color:var(--mut);margin-bottom:1rem}.split .addr{color:var(--fg)}
.facts{list-style:none;display:grid;gap:1rem;padding:0}
.facts li{padding:1rem 1.2rem;background:var(--bg2);border-left:2px solid #bbb;color:var(--mut)}
.facts b{display:block;color:var(--fg);font-family:"Pirata One",cursive;font-size:1.2rem}

/* artistas */
.stage{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.roster{list-style:none;padding:0}
.roster li{display:flex;align-items:baseline;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line);cursor:pointer;font:400 clamp(2rem,6vw,3.6rem)/1.1 "Pirata One",cursive;color:#ffffff30;transition:.3s}
.roster li small{font:500 .8rem Inter,sans-serif;letter-spacing:.2em}
.roster li:hover,.roster li.on{color:#fff;padding-left:.8rem}
.roster li.on{text-shadow:0 0 30px #ffffff55}
.tilt{perspective:900px}
.card3d{position:relative;aspect-ratio:4/5;max-width:340px;margin:auto;padding:1.8rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;overflow:hidden;
 background:linear-gradient(160deg,#26262b,#09090a 60%);border:1px solid #ffffff30;border-radius:6px;
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s;transform-style:preserve-3d;box-shadow:0 30px 60px #000a}
.card3d::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#ffffff2a,transparent 55%);pointer-events:none}
.card3d .mono{position:absolute;top:-1rem;right:.5rem;font:400 12rem/1 "Pirata One",cursive;color:#ffffff0d;transform:translateZ(30px)}
.card3d .num{letter-spacing:.3em;color:var(--mut);font-size:.8rem}
.card3d h3{font-size:2.2rem;transform:translateZ(50px)}
.card3d p{color:var(--mut);margin-bottom:.8rem;transform:translateZ(30px)}
.card3d .btn{align-self:flex-start;transform:translateZ(40px)}

.quote p{color:var(--mut);margin-bottom:1.5rem}
form{display:grid;gap:.9rem;max-width:560px}
input,textarea,select{width:100%;padding:.9rem 1rem;background:var(--bg2);border:1px solid #ffffff22;color:var(--fg);font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid #fff;outline-offset:1px}
form small{color:var(--mut);min-height:1.5em}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2rem 5vw;border-top:1px solid var(--line);color:var(--mut);font-size:.9rem}
footer a:hover{color:#fff}
@media(max-width:700px){.split,.stage{grid-template-columns:1fr}.nav nav{gap:.8rem;font-size:.78rem}.logo span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* logo del hero: el <img> ocupa el espacio; el canvas 3D lo reemplaza visualmente */
h1{margin:0 0 1rem}
#logo{width:min(80vw,64vh,520px);height:auto;filter:drop-shadow(0 0 30px #ffffff22)}
#logo.gone{opacity:0}
.cta.left{justify-content:flex-start;margin-top:0}
[hidden]{display:none!important}
@media(min-width:900px){#inicio{padding-left:48vw}}
.info{list-style:none;padding:0;margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.info li{padding:1rem 1.2rem;background:var(--bg2);border-left:2px solid #bbb;color:var(--mut)}
.info b{display:block;color:var(--fg);font:400 1.2rem "Pirata One",cursive;letter-spacing:.03em;text-transform:uppercase}
.info a:hover{color:#fff}
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.8) brightness(1.05);transition:.5s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#000c)}
.tile:hover img{filter:none;transform:scale(1.06)}
.tile.vid::before{content:"";position:absolute;z-index:1;right:.8rem;bottom:.8rem;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
@media(max-width:700px){.reel{grid-template-columns:repeat(2,1fr)}}
button.tile{padding:0;cursor:zoom-in;font:inherit;color:inherit}
dialog{border:0;background:none;max-width:94vw;max-height:94vh;margin:auto}
dialog::backdrop{background:#000d}
dialog img{display:block;max-width:94vw;max-height:92vh;cursor:zoom-out}
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chips button{padding:.5rem 1.1rem;background:none;border:1px solid #ffffff2a;border-radius:99px;color:var(--mut);font:inherit;cursor:pointer;transition:.2s}
.chips button:hover{border-color:#fff;color:#fff}
.chips button[aria-pressed=true]{background:#eee;border-color:#eee;color:#050505}
.wa-float{position:fixed;left:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:99px;background:#25d366;color:#fff;font:600 .9rem Inter,sans-serif;box-shadow:0 6px 24px #000a;transition:.2s}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 8px 28px #25d36666}
@media(max-width:700px){.wa-float span{display:none}.wa-float{padding:.85rem}}
@media(max-width:899px){.hero{place-content:end center;padding-top:48vh}}
@media(max-width:899px){.hero{padding-top:44vh;padding-bottom:5rem}#logo{width:min(64vw,40vh)}.tag{font-size:1rem}.cta{margin-top:1rem}.nav .logo{display:none}.nav{justify-content:center}}
.tilt{position:relative;z-index:0;isolation:isolate}
.style{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:center;margin-top:1.5rem;padding:1.2rem;background:var(--bg2);border:1px solid var(--line)}
.style img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.style h3{font-size:2rem;margin-bottom:.5rem}
.style p{color:var(--mut);margin-bottom:1.2rem}
@media(max-width:700px){.style{grid-template-columns:1fr;gap:1rem}}
.card3d{background-size:cover;background-position:center 15%}
.card3d{max-width:360px}

/* ===== Forma metal/tattoo: esquinas cortadas, hojas y cuchillas ===== */
:root{--cut:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
::selection{background:#fff;color:#000}
html{scrollbar-color:#6c6c72 #050505}

/* botones: bisel en dos esquinas; el fantasma dibuja su borde con un fondo interior */
.btn{position:relative;isolation:isolate;clip-path:var(--cut);border:0;padding:.95rem 2rem;letter-spacing:.14em}
.btn.ghost{background:#ffffff55}
.btn.ghost::before{content:"";position:absolute;inset:1px;z-index:-1;background:#0b0b0d;clip-path:var(--cut);transition:.2s}
.btn.ghost:hover{background:#fff;box-shadow:none}
.btn:hover{box-shadow:none;background:#fff}
.btn:not(.ghost):hover{filter:drop-shadow(0 0 14px #fff6)}

/* chips: paralelogramo afilado */
.chips button{position:relative;isolation:isolate;border:0;border-radius:0;padding:.55rem 1.4rem;background:#ffffff33;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.chips button::before{content:"";position:absolute;inset:1px;z-index:-1;background:#080809;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.chips button:hover{background:#fff}
.chips button[aria-pressed=true]{background:#fff}
.chips button[aria-pressed=true]::before{background:#eee}

/* paneles: esquina superior derecha e inferior izquierda cortadas con filo plateado */
.facts li,.info li,.style,.card3d{position:relative}
.facts li::after,.info li::after,.style::after,.card3d::before,
.facts li::before,.info li::before,.style::before{content:"";position:absolute;width:22px;height:22px;pointer-events:none;z-index:2}
.facts li::after,.info li::after,.style::after,.card3d::before{top:-1px;right:-1px;background:linear-gradient(225deg,var(--bg) 0 calc(50% - 1px),#ffffff66 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.facts li::before,.info li::before,.style::before{bottom:-1px;left:-1px;background:linear-gradient(45deg,var(--bg) 0 calc(50% - 1px),#ffffff66 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.facts li,.info li{border-left:0;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 #bbb}

/* títulos: la raya pasa a ser una daga */
h2::after{width:110px;height:7px;background:var(--silver);clip-path:polygon(0 0,100% 50%,0 100%,12px 50%)}
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);transition:width .25s}
.nav nav a:hover::after{width:100%}

/* galería y botón flotante con el mismo corte */
.tile{clip-path:var(--cut);border:0}
.wa-float{border-radius:0;clip-path:var(--cut)}
@media(max-width:700px){.wa-float{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}}

/* ===== animaciones 3D de cambio ===== */
@keyframes flipIn{from{opacity:0;transform:perspective(900px) rotateY(-85deg) translateZ(-120px)}to{opacity:1;transform:perspective(900px) rotateY(0) translateZ(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.card3d.flip{animation:flipIn .65s cubic-bezier(.2,.8,.2,1)}
#s-txt.slide{animation:slideIn .5s .1s cubic-bezier(.2,.8,.2,1) both}
.style img{transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .15s;box-shadow:0 24px 40px #000a}
.style img.flip{animation:flipIn .65s cubic-bezier(.2,.8,.2,1)}
.roster li{transform-origin:left center;transition:.3s}
.roster li:hover,.roster li.on{transform:perspective(500px) rotateY(-14deg) translateX(10px)}
@media(prefers-reduced-motion:reduce){.card3d.flip,#s-txt.slide,.style img.flip{animation:none}}