/* ================= TEMA CÓMIC (se carga después de style.css) ================= */
:root{--yl:#ffd83b;--ink:#000;--bg2:#08141a}
body{background-image:radial-gradient(rgba(165,232,230,.10) 1.4px,transparent 1.6px);background-size:14px 14px;background-attachment:fixed}
#fx,.scroll{display:none!important}
h1,h2.t,.brand,.card h3,.col h3,.cd b,.stat b,.mini b{font-family:Bangers,Impact,sans-serif;font-weight:400;letter-spacing:1.5px}
nav.top{background:#000;border-bottom:4px solid var(--cy);backdrop-filter:none}
.brand{font-size:30px}
.links a{font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:13px}
.links a::after{height:4px;background:var(--yl);transform:skewX(-20deg)}

/* títulos como cajas de cómic */
h2.t{display:inline-block;background:var(--cy);color:#000;border:4px solid #000;padding:6px 22px 2px;box-shadow:8px 8px 0 var(--yl);transform:rotate(-1.5deg);text-transform:uppercase;letter-spacing:2px;line-height:1.1;margin-bottom:26px;font-size:clamp(34px,6vw,58px)}
h2.t em{color:#fff;text-shadow:3px 3px 0 #000;-webkit-text-stroke:1px #000}
.ph .lead{margin-left:auto;margin-right:auto}
.ev h1{text-transform:uppercase;text-shadow:5px 5px 0 var(--cy-d)}
.dl h1.t{background:none;border:0;box-shadow:none;transform:none;padding:0;display:block;color:#fff;text-transform:uppercase;text-shadow:5px 5px 0 var(--cy-d);font-size:clamp(48px,8vw,90px)!important;font-weight:400!important}
.dl h1.t em{color:var(--cy)}

/* hero */
.hero{background:radial-gradient(circle at 50% 55%,rgba(165,232,230,.22),transparent 55%)}
.hero::before{content:"";position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 55%,rgba(165,232,230,.13) 0 5deg,transparent 5deg 10deg);-webkit-mask:radial-gradient(circle at 50% 55%,#000 5%,transparent 70%);mask:radial-gradient(circle at 50% 55%,#000 5%,transparent 70%)}
.hero h1{font-family:Bangers,Impact,sans-serif;font-weight:400;letter-spacing:4px;text-shadow:6px 6px 0 #000,10px 10px 0 var(--cy-d);-webkit-text-stroke:3px #000;paint-order:stroke fill;transform:rotate(-2deg)}
.hero h1 span{color:var(--cy)}
.hero p.sub{background:#000;display:inline-block;padding:6px 18px;border:3px solid var(--cy);transform:rotate(1deg);font-weight:600;text-shadow:none}
.hero img.logo{animation:none;filter:drop-shadow(5px 5px 0 #000) drop-shadow(0 0 30px rgba(165,232,230,.4))}

/* botones */
.btn{border:3px solid #000;border-radius:6px;text-transform:uppercase;letter-spacing:1px;font-weight:900;transform:rotate(-1.5deg);box-shadow:5px 5px 0 var(--yl)}
.btn.p{background:var(--cy);color:#000}
.btn.g{background:#000;color:var(--cy);border-color:var(--cy);box-shadow:5px 5px 0 var(--cy-d)}
.btn:hover{transform:translate(3px,3px) rotate(-1.5deg);box-shadow:2px 2px 0 var(--yl)}
.btn.p:hover{box-shadow:2px 2px 0 var(--yl)}
.btn.g:hover{background:var(--cy);color:#000;box-shadow:2px 2px 0 var(--cy-d)}

/* secciones con borde dentado y trama */
section.sec{position:relative}
main>section.sec:nth-of-type(even){background:var(--bg2);background-image:radial-gradient(rgba(165,232,230,.13) 2px,transparent 2.2px);background-size:16px 16px;margin-top:22px;padding-top:90px}
main>section.sec:nth-of-type(even)::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(135deg,var(--bg2) 50%,transparent 50%) 0 0/24px 18px,linear-gradient(225deg,var(--bg2) 50%,transparent 50%) 0 0/24px 18px}

/* tarjetas */
.card,.col,.yt,.glass,.shots,.mini,.ev .poster{border:4px solid #000;border-radius:10px;box-shadow:7px 7px 0 var(--cy)}
.card:hover,.col:hover,.yt:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:12px 12px 0 var(--yl);border-color:#000}
.card::after{background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 32%,transparent 62%)}
.card h3{font-size:28px;text-shadow:3px 3px 0 #000;text-transform:uppercase}
.card .num{background:var(--yl);color:#000;border:3px solid #000;border-radius:4px;transform:rotate(-6deg);font-size:15px;font-family:Bangers,Impact,sans-serif;letter-spacing:1px}
.pill{border:2px solid #000;border-radius:4px;transform:rotate(-3deg);font-weight:900}
.pill.soon{background:var(--yl);color:#000;animation:none}
.pill.done{background:var(--cy);color:#000}
.chip{background:var(--cy);color:#000;border:3px solid #000;border-radius:4px;transform:skewX(-8deg);font-weight:800;box-shadow:3px 3px 0 #000}
.glass{background:#0b1a20 radial-gradient(rgba(165,232,230,.16) 1.5px,transparent 1.7px) 0 0/10px 10px}
.stat b{font-size:56px;text-shadow:3px 3px 0 #000}
.col .bnw{border-bottom:4px solid #000}
.col .av{border:4px solid #000;box-shadow:3px 3px 0 var(--cy)}
.col h3{font-size:30px}
.mini:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--yl)}
.mini img{border:3px solid #000}
.arr{border:3px solid #000;border-radius:6px;background:var(--cy);color:#000;font-weight:900;font-size:22px;box-shadow:3px 3px 0 var(--yl);backdrop-filter:none}
.arr:hover{background:var(--yl)}
.yt .pl i{background:var(--yl);border:4px solid #000;border-radius:50%}
.yt .pl i::before{border-left-color:#000}
.yt:hover .pl i{background:var(--cy)}

/* encabezados de página */
.ph::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(rgba(0,0,0,.45) 2px,transparent 2.2px) 0 0/9px 9px}
.ph .wrap{z-index:2}

/* carrusel de capturas del launcher */
.shots{position:relative;aspect-ratio:1232/700;overflow:hidden;background:#000;cursor:pointer}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.shots img.on{opacity:1}
.shots .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.shots .dots i{width:14px;height:14px;background:#000;border:3px solid var(--cy);transform:skewX(-15deg);cursor:pointer}
.shots .dots i.on{background:var(--yl)}

/* footer */
footer{background:#000;border-top:4px solid var(--cy);backdrop-filter:none;margin-top:90px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-22px;height:18px;background:linear-gradient(135deg,#000 50%,transparent 50%) 0 0/24px 18px,linear-gradient(225deg,#000 50%,transparent 50%) 0 0/24px 18px}
footer h4{font-family:Bangers,Impact,sans-serif;font-weight:400;font-size:20px;letter-spacing:2px;color:var(--yl)}

/* ===== BORDES PUNTIAGUDOS (cómic) ===== */
:root{--spike:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);--spike2:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);--spike3:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.card,.col,.yt,.glass,.shots,.ev .poster{border:0;box-shadow:none;border-radius:0;clip-path:var(--spike)}
.card:hover,.col:hover,.yt:hover{box-shadow:none;transform:translate(-4px,-4px) rotate(-1deg)}
.grid,.track,.collabs,.vids,.feat,.stats-wrap,.pw,.intro>.glass{filter:drop-shadow(7px 7px 0 var(--cy))}
.track{padding-right:16px;padding-bottom:30px}
.intro>.glass{filter:none}.intro{filter:none}
.glass{clip-path:var(--spike)}
.stats{filter:none}
.pw{display:block}
.mini{border-radius:0;clip-path:var(--spike3);box-shadow:none;border:0;background:var(--panel)}
.cta{filter:drop-shadow(5px 5px 0 var(--yl))}
.btn{border-radius:0;clip-path:var(--spike2);box-shadow:none!important;border:0;padding:14px 30px}
.btn.g{background:#0b1a20;color:var(--cy)}
.btn:hover{box-shadow:none!important}
.chips{filter:drop-shadow(3px 3px 0 var(--cy-d))}
.chip{border:0;border-radius:0;clip-path:var(--spike3);box-shadow:none;padding:8px 18px}
.pill{border:0;border-radius:0;clip-path:var(--spike3);padding:5px 14px}
.card .num{border:0;border-radius:0;clip-path:var(--spike3);padding:6px 12px}
.arr{border-radius:0;border:0;clip-path:var(--spike2);box-shadow:none;width:48px;height:48px}
.cd div{border:0;border-radius:0;clip-path:var(--spike3);box-shadow:none}
.col .av{border-radius:50%;box-shadow:none;border:4px solid var(--cy)}
.col .bnw{border-bottom:4px solid var(--cy)}
.col .bd{background:#0b1a20}
.yt .pl i{clip-path:polygon(50% 0,62% 18%,86% 14%,82% 38%,100% 50%,82% 62%,86% 86%,62% 82%,50% 100%,38% 82%,14% 86%,18% 62%,0 50%,18% 38%,14% 14%,38% 18%);border:0;border-radius:0;width:76px;height:76px}
.shots .dots i{border:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:18px;height:18px;background:var(--cy)}
.shots .dots i.on{background:var(--yl)}

/* títulos: forma dentada con sombra amarilla */
h2.t{position:relative;background:none;border:0;box-shadow:none;isolation:isolate;padding:10px 30px 4px}
h2.t::before,h2.t::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
h2.t::after{background:var(--cy)}
h2.t::before{background:var(--yl);transform:translate(8px,8px)}

nav.top{border-bottom:4px solid var(--cy)}
nav.top::before,nav.top::after{display:none}
.hero p.sub{border:0;clip-path:var(--spike3);padding:8px 24px;background:#0b1a20}
footer{border-top:4px solid var(--cy)}
footer::before,footer::after{display:none}