header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;position:fixed;top:0;width:100%;z-index:1000;background:#0000004d;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.logo{font-size:2.2rem;display:inline-block;cursor:pointer;animation:pulsoMelocoton 2s ease-in-out infinite;transform-origin:center}.logo-link:hover .logo{animation:pulsoMelocoton .4s ease-in-out infinite}@keyframes pulsoMelocoton{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@media(max-width:480px){.logo{font-size:.6rem;white-space:normal;margin-bottom:.5rem;margin-top:.5rem;text-align:center;line-height:1.2}}.menu-toggle{display:none;font-size:1.8rem;font-weight:700;cursor:pointer;z-index:1000;line-height:1;outline:none;background-color:#2a1410!important;padding:.4rem .6rem;border:3px solid #000000!important;border-radius:12px;color:#fff700;box-shadow:3px 3px #000;transition:transform .2s ease,background-color .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent}.menu-toggle:hover,.menu-toggle:focus{background-color:#2a1410!important;color:#f36;transform:scale(1.05)}.menu-toggle:active{background-color:#2a1410!important;transform:scale(.95) translate(2px,2px);box-shadow:1px 1px #000}nav{display:flex;align-items:center;gap:1rem}nav>a{font-size:.9rem;padding:.4rem 1.5rem;font-weight:700;font-family:Permanent Marker,cursive;color:#fff;text-decoration:none;border-radius:999px;background:linear-gradient(135deg,#ff4500,coral);border:3px solid #ff1493;box-shadow:0 0 10px #ff1493,0 0 15px #ff69b4 inset;transition:all .3s ease;position:relative}nav>a:before{content:"🍑";position:absolute;left:2px;top:50%;transform:translateY(-50%)}nav>a:after{content:"🍑";position:absolute;right:2px;top:50%;transform:translateY(-50%)}nav>a:hover{transform:scale(1.1) rotate(-2deg);box-shadow:0 0 20px #ff1493,0 0 25px #ff69b4 inset}.social-icons{display:flex;gap:.5rem;align-items:center}.social-icons a img{width:28px;height:28px;transition:transform .3s}.social-icons a img:hover{transform:scale(1.2)}@media(max-width:768px){.menu-toggle{display:block}nav{position:absolute;top:100%;left:0;right:0;background:#dfc33ca6;flex-direction:column;align-items:center;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0}nav.open{max-height:600px;padding:1rem 0}nav>a{margin:.5rem 0;width:80%;text-align:center;box-sizing:border-box;padding:.4rem 0}.social-icons{margin-top:.5rem}}.footer{padding:1rem;color:#fff;text-align:center}.footer-img{width:500px;max-width:80%;height:auto;display:block;margin:0 auto 1rem;transform:translate(-10px);filter:drop-shadow(10px 0 0 #ff69b4)}.footer-text{font-size:.7rem}@media(max-width:768px){.footer-img{width:300px}.footer-text{font-size:.9rem}}@media(max-width:480px){.footer-img{width:200px}.footer-text{font-size:.8rem}}.home-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 10%;align-items:center}.home-text{text-align:left}.home-text h1{position:relative;font-size:4rem;z-index:1;color:#fc0;text-shadow:2px 2px 0 #000}.home-text p{font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:1rem;font-weight:500;line-height:1.2;color:#fffaf0;letter-spacing:.1px;margin-bottom:1.5rem}.contenedor-de-las-imagenes{display:flex;flex-direction:row;justify-content:center;gap:2rem;align-items:center}.home-image img{width:100%;height:auto;max-width:500px;border-radius:12px;box-shadow:2px 2px #000,-2px -2px #000,3px -3px #000,-3px 3px #000}.clickable-image{margin:20px auto 0;max-width:300px;width:100%;cursor:pointer;transition:transform .2s;height:auto;display:block}.clickable-image:hover{transform:scale(1.05)}.clickable-image:active{transform:scale(.98)}.clickable-image:hover{animation:shake .5s infinite;filter:drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 30px #00ffff)}.fade-line{height:1px;width:80%;margin:40px auto;background:linear-gradient(to right,transparent,rgba(255,255,255,.5),transparent)}.home-spotify-section{padding:20px;text-align:center;max-width:800px;margin:0 auto}.home-spotify-section h2{position:relative;font-size:1.8rem;z-index:1;color:#fc0;text-shadow:2px 2px 0 #000}.home-spotify-section p{font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:1rem;font-weight:500;line-height:1.2;color:#fffaf0;letter-spacing:.1px;margin-bottom:1.5rem}.home-spotify-image{display:block;max-width:100%;height:auto;margin:2rem auto 0;border-radius:12px;box-shadow:2px 2px #000,-2px -2px #000,3px -3px #000,-3px 3px #000}@keyframes shake{0%{transform:translate(1px,1px) rotate(0) scale(1.05)}20%{transform:translate(-2px) rotate(-1deg) scale(1.05)}40%{transform:translate(2px,2px) rotate(1deg) scale(1.08)}60%{transform:translate(-1px,1px) rotate(0) scale(1.05)}80%{transform:translate(3px,-1px) rotate(1deg) scale(1.08)}to{transform:translate(1px,1px) rotate(0) scale(1.05)}}@media(max-width:1024px){.home-container{padding:2rem 4%;gap:1.5rem}.home-text h1{font-size:1.8rem}.home-text p{font-size:.95rem}}@media(max-width:768px){.home-container{grid-template-columns:1fr;text-align:center;padding:1.5rem}.home-text{text-align:center}.home-image img{max-width:100%}}@media(max-width:480px){.home-text h1{font-size:1.5rem}.home-text p{font-size:.9rem}.clickable-image{max-width:90%}}@media(max-width:480px){.contenedor-de-las-imagenes{flex-direction:column;gap:1rem}}.video-gallery-container{padding:2rem}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.video-item{cursor:pointer;text-align:center;transition:transform .2s ease}.video-item:hover{transform:scale(1.05)}.video-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.video-thumb{width:100%;border-radius:12px;box-shadow:2px 2px 8px #00000080}.video-player-container{text-align:center}.selected-video-title{font-size:2rem;margin-bottom:1rem}.back-button{margin-top:1rem;padding:.5rem 1rem;border-radius:8px;border:none;background-color:#fc0;font-weight:700;cursor:pointer;box-shadow:2px 2px #000}.video-player-wrapper{position:relative;width:90%;max-width:800px;padding-top:56.25%;margin:0 auto 1rem;border-radius:16px;overflow:hidden}.video-player-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px}@media(max-width:1024px){.video-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.video-grid{grid-template-columns:1fr}.selected-video-title{font-size:1.5rem}}@media(max-width:480px){.selected-video-title{font-size:1.2rem}}.music-container{display:flex;align-items:flex-start;gap:4rem;padding:1rem;min-height:100vh;flex-wrap:wrap}.music-left{flex:0 0 320px;margin-top:1rem}.album-cover{width:100%;display:block;border-radius:20px;box-shadow:2px 2px #000,-2px -2px #000,3px -3px #000,-3px 3px #000;object-fit:cover;margin-bottom:1rem}.album-cover.extra{margin-top:1rem}.soundcloud-player{border-radius:12px;width:100%}.music-right{flex:1;text-align:left}.music-title{position:relative;font-size:4rem;z-index:1;color:#fc0;text-shadow:2px 2px 0 #000}.music-title:before{content:"MUTANTE";position:absolute;top:0;left:0;z-index:-1;color:#fc0;filter:blur(10px);opacity:.8;white-space:nowrap;animation:morph-shadow 6s ease-in-out infinite,morph-content 6s step-end infinite}@keyframes morph-shadow{0%{transform:scale(1) skew(0);filter:blur(4px);opacity:.8}25%{transform:scale(1.5,.7) skew(20deg) translate(15px);color:#f0f}50%{transform:scale(.8,1.3) skew(-15deg) translateY(-10px);color:#0ff}85%{transform:scale(2) translateY(10px) rotate(10deg);filter:blur(4px);color:#f30;opacity:1}to{transform:scale(1) skew(0);filter:blur(10px);opacity:.8}}.song-list{columns:2;column-gap:3rem;font-size:1.1rem;line-height:2;padding-left:1rem;list-style-type:decimal;list-style-position:inside;color:#fc0;text-shadow:2px 2px 0 #000;font-weight:700}.song-item{margin-bottom:1rem;cursor:pointer;transition:transform .2s ease,color .2s ease}.song-item:hover{transform:scale(1.1) rotate(-1deg);color:#0ff;text-shadow:0 0 5px #00ffff,0 0 10px #00ffff,2px 2px 0 #000;animation:jitter .2s infinite}@keyframes jitter{0%{transform:scale(1.1) translateY(0)}50%{transform:scale(1.1) translateY(-2px) rotate(1deg)}to{transform:scale(1.1) translateY(0)}}.song-item:hover{transform:translate(5px) scale(1.05);color:#fff700}.song-title{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#fc0;text-shadow:2px 2px 0 #000}.song-lyrics{font-size:1rem;line-height:1.4;white-space:pre-wrap;color:#fff;text-align:left}.song-lyrics.two-columns{columns:2;column-gap:2rem;text-align:justify}.back-button{margin-top:2rem;padding:.5rem 1rem;border-radius:10px;border:none;background:#fc0;font-weight:700;cursor:pointer;box-shadow:2px 2px #000}@media(max-width:768px){.desktop-br{display:none}}@media(max-width:1024px){.music-container{gap:2rem}.music-left{flex:0 0 280px;margin-top:4rem}.music-title{font-size:3rem}.song-list{columns:1}}@media(max-width:768px){.music-container{flex-direction:column;align-items:center;padding-top:0rem}.music-right{order:1;flex:1 0 100%;text-align:center;margin-bottom:2rem;width:100%}.music-left{order:2;flex:1 0 100%;margin-top:1rem;width:100%;max-width:400px}.music-title{font-size:4rem;letter-spacing:2px;display:inline-block}.song-list{columns:1;font-size:1.1rem;padding-left:0;list-style-position:inside}.song-item:hover{transform:none;color:#fff700}.song-lyrics,.song-lyrics.two-columns{columns:1;font-size:1rem;line-height:1.6;text-align:left}.back-button{padding:.7rem 1.2rem;font-size:1.1rem;width:100%}}@media(max-width:480px){.music-right{margin-top:2rem}.music-title{font-size:3rem}.music-title:before{filter:blur(8px)}.song-title{font-size:1.8rem}.song-list{font-size:1rem}.song-lyrics,.song-lyrics.two-columns{font-size:.95rem;line-height:1.5}}.gallery-container{padding:2rem;text-align:center;color:#fff}.gallery-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.gallery-item{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:16px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.gallery-item:hover{transform:scale(1.05)}.gallery-img{max-width:95%;max-height:95%;object-fit:contain;transition:transform .4s ease;background:transparent;border-radius:12px;box-shadow:2px 2px #000,-2px -2px #000,3px -3px #000,-3px 3px #000}.gallery-item:hover .gallery-img{transform:scale(1.04)}.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000}.lightbox-img{max-width:90%;max-height:80%;border-radius:16px}.flecha{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:#fc0;background:#00000080;border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;z-index:1010;transition:background .2s ease,transform .2s ease}.flecha.izquierda{left:2%}.flecha.derecha{right:2%}.flecha:hover{background:#000c;transform:translateY(-50%) scale(1.1)}.close{position:absolute;top:2%;right:2%;font-size:3rem;color:#fc0;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1010;transition:transform .2s}.close:hover{transform:scale(1.1)}@media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}.merch-section{padding:.5rem 1rem 1rem;max-width:768px;margin:0 auto}.merch-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10rem;padding:1rem 0}.merch-info{display:flex;flex-direction:column;text-align:left}.merch-title{position:relative;font-size:4rem;z-index:1;color:#fc0;text-shadow:2px 2px 0 #000}.merch-description{font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:1rem;font-weight:500;line-height:1.2;color:#fffaf0;letter-spacing:.1px;margin-bottom:1.5rem}.merch-images{position:relative;width:250px;height:250px;flex-shrink:0}.cd-back,.cd-front{width:250px;height:250px;object-fit:cover;border-radius:.2rem;position:absolute;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.cd-back{top:15px;left:40px;z-index:1;box-shadow:0 4px 8px #0003}.cd-front{top:-15px;left:-40px;z-index:2;box-shadow:0 4px 8px #0000004d}.cd-back:hover,.cd-front:hover{transform:scale(1.05);box-shadow:0 8px 16px #0006}.order-form{margin:1rem auto 0;padding:1rem;display:flex;flex-direction:column;gap:.75rem;max-width:400px}.order-form h3{font-size:1.25rem;font-weight:700;color:#c4a21b;text-shadow:2px 2px 0 #000;text-align:center;margin-bottom:.5rem}.order-form label{color:#fffaf0;text-shadow:2px 2px 0 #000;font-weight:700;margin-bottom:.25rem;display:block;font-size:.9rem}.order-form input,.order-form textarea{width:100%;padding:.5rem .75rem;border-radius:.375rem;border:1px solid #333;background-color:#fff;color:#000;font-size:.95rem;outline:none;transition:border-color .3s,box-shadow .3s}.order-form input::placeholder,.order-form textarea::placeholder{color:#aaa}.order-form input:focus,.order-form textarea:focus{border-color:#db2777;box-shadow:0 0 5px #db277780}.order-form textarea{resize:vertical;min-height:80px}.order-form button{margin-top:1rem;padding:.5rem 1rem;border-radius:8px;border:none;background-color:#fc0;font-weight:700;cursor:pointer;box-shadow:2px 2px #000;transition:background-color .3s,transform .2s}.order-form button:hover{transform:translateY(-1px)}.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000d9;display:flex;justify-content:center;align-items:center;z-index:999;cursor:zoom-out;animation:fadeIn .3s ease;overflow:hidden}.lightbox-content{position:relative;display:flex;align-items:center;justify-content:center}.lightbox img{max-width:80%;max-height:80vh;object-fit:contain;border-radius:.2rem;box-shadow:0 8px 20px #00000080}.flecha{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:#fc0;background:#0000004d;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;z-index:1000;transition:background .2s ease}.flecha.izquierda{left:-60px}.flecha.derecha{right:-60px}.flecha:hover{background:#0009}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.merch-container{flex-direction:column;align-items:center;gap:2rem}.merch-info{text-align:center}.merch-title{font-size:2.5rem;text-align:center}.merch-images,.cd-back,.cd-front{width:160px;height:160px}.cd-back{top:10px;left:30px}.cd-front{top:-10px;left:-30px}.merch-description{text-align:center;font-size:.9rem}.order-form{width:100%;max-width:400px;margin:2rem auto;padding:.75rem;gap:.5rem;box-sizing:border-box}.order-form form{display:flex;flex-direction:column;align-items:center;width:100%}.order-form h3{font-size:1.1rem}.order-form input,.order-form textarea{font-size:.9rem}.order-form button{font-size:.95rem;padding:.4rem .6rem;align-self:center}}@media(max-width:400px){.merch-title{font-size:2rem}.merch-images,.cd-back,.cd-front{width:120px;height:120px}.cd-back{top:8px;left:20px}.cd-front{top:-8px;left:-20px}.merch-description{font-size:.8rem;line-height:1.3}.order-form{width:95%}}.splash-container{position:fixed;inset:0;background-image:url(https://www.transparenttextures.com/patterns/asfalt-dark.png),url(./assets/fondo.webp);background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:top left,center;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:2000;cursor:pointer;opacity:1;transition:opacity .8s ease-in-out}.splash-container.fade-out{opacity:0;pointer-events:none}.peach{width:300px;height:auto;transition:transform 1s ease-in-out;position:absolute;top:50%;transform:translateY(-50%)}.peach.left{left:50%;transform:translate(-100%,-50%);z-index:2}.peach.right{left:50%;transform:translateY(-50%);z-index:1}.peach.left.open{transform:translate(-140%,-50%) rotate(-15deg)}.peach.right.open{transform:translate(40%,-50%) rotate(15deg)}.splash-text{font-weight:700;color:#fff;position:absolute;top:50%;left:50%;width:500px;height:200px;transform:translate(-50%,-30%) scale(.2);transition:transform 1.2s ease-in-out,opacity .5s ease-in-out;z-index:0;opacity:0}.splash-text.open{transform:translate(-50%,-50%) scale(1.5);opacity:1}@media(max-width:900px){.peach-container{--scale-mobile: .6}@keyframes heartbeat{0%{transform:scale(calc(var(--scale-mobile) * 1))}25%{transform:scale(calc(var(--scale-mobile) * 1.05))}50%{transform:scale(calc(var(--scale-mobile) * 1))}75%{transform:scale(calc(var(--scale-mobile) * 1.05))}to{transform:scale(calc(var(--scale-mobile) * 1))}}.splash-text{transform:translate(-50%,-30%) scale(.12)}.splash-text.open{transform:translate(-50%,-50%) scale(1)}}.cookie-banner-overlay{position:fixed;bottom:20px;right:20px;left:20px;max-width:500px;background-color:#1a1a1a;color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 20px #00000080;z-index:9999;border:1px solid #333}@media(min-width:768px){.cookie-banner-overlay{left:auto;right:30px;bottom:30px}}.cookie-banner-content h3{margin-top:0;margin-bottom:10px;font-size:1.2rem}.cookie-banner-content p{font-size:.9rem;line-height:1.4;margin-bottom:15px;color:#ccc}.cookie-banner-buttons{display:flex;gap:10px}.btn-cookie{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:.85rem;transition:background-color .2s}.btn-cookie.accept{background-color:#ff6b6b;color:#fff}.btn-cookie.accept:hover{background-color:#ff5252}.btn-cookie.reject{background-color:#333;color:#ccc}.btn-cookie.reject:hover{background-color:#444;color:#fff}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fffffff2;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-image:url(https://www.transparenttextures.com/patterns/asfalt-dark.png),url(/assets/fondo-DNihuNH5.webp);background-repeat:repeat,no-repeat;background-size:auto,cover;background-position:top left,center;display:flex;flex-direction:column;color:#fff}header{position:fixed;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background-color:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0000004d;z-index:1000;box-sizing:border-box}.logo{font-size:1.8em;font-weight:700;letter-spacing:1px}nav a{font-weight:500;color:#fff;text-decoration:none;margin-left:25px;transition:color .3s,transform .2s}nav a:hover{color:#ffb347;transform:scale(1.1)}main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:100px}h1{font-size:3.5em;line-height:1.1;margin:.5em 0;text-shadow:2px 2px 10px rgba(0,0,0,.6)}p{font-size:1.3em;margin-bottom:1.5em;text-shadow:1px 1px 6px rgba(0,0,0,.5)}button{border-radius:8px;border:2px solid #ffb347;padding:.7em 1.5em;font-size:1.1em;font-weight:500;font-family:inherit;background-color:#ffffff1a;color:#fff;cursor:pointer;transition:all .3s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}button:hover{background-color:#ffb347;border-color:#fff;color:#000;transform:scale(1.05)}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}nav a:hover{color:#fff}button{background-color:#0000000d;color:#000}button:hover{background-color:#f06f00;color:#fff}}
