/*
  Paleta de Daniel (20-ago): #080808 fondo · #111111 tarjetas · #1A1A1A secundarios ·
  #292929 bordes · #5C5C5C secundarios · #D8D8D8 texto · #F2F2F2 títulos.
  Ajuste por contraste AA: el texto secundario usa #8A8A8A (5,0:1 o más en todas las
  superficies). #5C5C5C (3,0:1) queda solo para detalles decorativos, no para leer.
  Rojo: SOLO botones de compra y fecha del evento (rojo mínimo, elegido por Jhon el 2026-10-17).
*/
:root{
  --bg:#080808;--s1:#111111;--s2:#1A1A1A;--line:#292929;
  --dim:#5C5C5C;--mute:#8A8A8A;--ink:#D8D8D8;--hi:#F2F2F2;
  --acc:#B3060E;--acc-h:#D10812;--acc-tx:#FF2A33;--on-acc:#FFFFFF;
  --mx:50%;--my:30%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;background:var(--bg);overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.disp{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.04em;line-height:.92}
/* Cromo: degradado recortado al texto. Color de respaldo por si el navegador no lo pinta. */
.chrome{color:var(--hi)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome{background:linear-gradient(180deg,#FFFFFF 0%,#A4A4A4 34%,#F2F2F2 50%,#6A6A6A 64%,#D8D8D8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 48px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grano fino */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:linear-gradient(rgba(8,8,8,.92),rgba(8,8,8,0))}
nav .logo img{height:18px;width:auto}
nav ul{display:none;list-style:none;gap:30px}
nav ul a{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);transition:color .2s}
nav ul a:hover{color:var(--hi)}
@media(min-width:960px){nav{padding:0 48px}nav ul{display:flex}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;white-space:nowrap;padding:0 26px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;border:1px solid var(--line);color:var(--hi);background:transparent;transition:background .25s,border-color .25s,color .25s}
.btn:hover{border-color:var(--hi);background:var(--s2)}
.btn.buy{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.buy:hover{background:var(--acc-h);border-color:var(--acc-h)}
.btn.sm{min-height:40px;padding:0 16px;font-size:10px}
.btn svg{width:16px;height:16px;flex:none}

/* aparición suave: solo con JS (sin JS todo se ve). Nunca se anima un .chrome directamente:
   en Safari/iPhone el texto recortado con degradado puede desaparecer al animarlo. */
.js .fd{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .fd.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.1s}[data-d="2"]{transition-delay:.2s}[data-d="3"]{transition-delay:.3s}

/* HOME */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px 20px 90px;overflow:hidden}
.hero .glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 400px at var(--mx) var(--my),rgba(255,255,255,.08),transparent 70%)}
.hero .logo{position:relative;width:min(960px,92vw)}
.hero .logo img{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(255,255,255,.12))}
.hero .logo .spec{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);mix-blend-mode:screen;-webkit-mask-image:url(/assets/img/logo.png);mask-image:url(/assets/img/logo.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;background-size:300% 100%;background-position:calc(var(--mx) * 1.6) 0;pointer-events:none;opacity:.85}
.hero h1{margin-top:28px;font-size:clamp(28px,6vw,54px);color:var(--hi)}
.hero h1 span{color:var(--mute)}
.hero .tag{margin-top:10px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.hero .acts{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(560px,100%)}
.hero .acts .btn{width:100%}
.hero .acts .wide{grid-column:1/-1}
@media(min-width:700px){.hero .acts{grid-template-columns:repeat(3,1fr)}.hero .acts .wide{grid-column:auto}}
.hero .next{margin-top:34px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--line);background:rgba(17,17,17,.7)}
.hero .next .f{font-size:44px;color:var(--acc-tx);line-height:.85}
.hero .next .f small{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-top:4px}
.hero .next .i{text-align:left}
.hero .next .i b{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:28px;letter-spacing:.04em;color:var(--hi);line-height:1}
.hero .next .i span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* secciones */
section{padding:90px 0;scroll-margin-top:50px}
@media(min-width:900px){section{padding:130px 0}}
.sh{display:grid;gap:16px;margin-bottom:44px;align-items:end}
@media(min-width:900px){.sh{grid-template-columns:1fr auto}}
.sh .n{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:12px}
.sh h2,.sh h1{font-size:clamp(60px,12vw,150px);padding-top:.14em} /* aire para las tildes: el degradado se recorta a la caja */
.sh p{max-width:40ch;color:var(--mute);font-size:15px}

/* 01 EVENTOS */
.evs{display:grid;gap:22px}
@media(min-width:900px){.evs{grid-template-columns:1fr 1fr}}
.evc{display:grid;grid-template-columns:1fr;background:var(--s1);border:1px solid var(--line)}
@media(min-width:560px){.evc{grid-template-columns:200px 1fr}}
.evc .fly{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--s2)}
.evc .fly img{width:100%;height:100%;object-fit:cover}
.evc .fly.sq{aspect-ratio:1/1}
.evc .bd{padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.evc .fe{display:flex;align-items:baseline;gap:12px}
.evc .fe .d{font-size:64px;line-height:.8;color:var(--acc-tx)}
.evc .fe .m{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-tx)}
.evc h3{font-size:44px;color:var(--hi)}
.evc dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.evc dt{color:var(--mute);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding-top:3px}
.evc dd{color:var(--ink)}
.evc .tk{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--ink)}
.evc .tk li{display:flex;justify-content:space-between;gap:10px;list-style:none;padding:3px 0}
.evc .tk li span:last-child{color:var(--hi);font-family:"JetBrains Mono",monospace}
.evc .tk .agot{color:var(--mute);text-decoration:line-through}
.evc .tk li.on span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc-tx);margin-right:8px;vertical-align:middle}
.evc .btn.buy.off{background:none;border-color:var(--line);color:var(--mute);pointer-events:none}
.evc .btn.buy{margin-top:auto}
.arch{margin-top:48px}
.arch h3{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;font-family:"JetBrains Mono",monospace;font-weight:400}
.arch ul{list-style:none;border-top:1px solid var(--line)}
.arch li{display:grid;grid-template-columns:88px 1fr;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.arch .d{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.arch .t{font-size:24px;color:var(--ink)}
.arch .w{grid-column:2;font-size:12px;color:var(--mute)}
@media(min-width:900px){.arch li{grid-template-columns:120px 1fr 280px}.arch .w{grid-column:auto;text-align:right}}

/* 02 RELEASES */
.rel{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:620px){.rel{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1000px){.rel{grid-template-columns:repeat(3,1fr)}}
.rc .cov{position:relative;aspect-ratio:1;overflow:hidden;background:var(--s1)}
.rc .cov img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .6s}
.rc:hover .cov img,.rc:focus-within .cov img{filter:none}
.rc .meta{padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.rc h3{font-size:34px;color:var(--hi)}
.rc .a{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-top:4px}
.rc .g{font-size:12px;color:var(--mute);margin-top:2px}
.rc .pl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* 03 ARTISTAS */
.arts{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:620px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.arts{grid-template-columns:repeat(3,1fr)}}
.ac{background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column}
.ac .ph{aspect-ratio:4/3;overflow:hidden;background:var(--s2);position:relative}
.ac .ph.ini{display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 20%,#2a2a2a,#0b0b0b 70%)}
.ac .ph.ini span{font-size:96px;line-height:1;color:transparent;-webkit-text-stroke:1px #5C5C5C;letter-spacing:.06em}
.ac .ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:grayscale(1) contrast(1.1)}
.ac .ph.vacia{display:grid;place-items:center}
.ac .ph.vacia span{font-family:"Bebas Neue",Impact,sans-serif;font-size:140px;color:var(--s1);line-height:1}
.ac .bd{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ac .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.ac h3{font-size:42px;color:var(--hi)}
.ac p{font-size:14px;color:var(--ink)}
.ac .ln{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}

/* 04 COMUNIDAD */
.com{position:relative}
.tracks{border:1px solid var(--line);background:var(--s1);padding:8px}
.tracks iframe{display:block;width:100%;height:450px;border:0}
.tracks .tr{display:grid;gap:14px;justify-items:start;padding:28px 20px}
.tracks .tr .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.tracks .tr h3{font-size:clamp(40px,7vw,64px);line-height:.9;margin:0}
.tracks .tr p{margin:0;max-width:52ch}
.tracks .tr small{font-size:12px;color:var(--mute)}
.tracks a{display:block;padding:12px 6px 4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.tracks a:hover{color:var(--hi)}
.com .cta{margin-top:34px;display:grid;gap:12px}
@media(min-width:700px){.com .cta{grid-template-columns:1fr 1fr;max-width:760px}}
.com .frase{padding-top:.12em;margin:44px 0 0;font-size:clamp(34px,6vw,72px);max-width:20ch}

/* 05 CONTACTO */
.cto{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:900px){.cto{grid-template-columns:1fr 1fr}}
.cto a,.cto div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 2px;border-bottom:1px solid var(--line)}
@media(min-width:900px){.cto>*:nth-child(odd){padding-right:28px;border-right:1px solid var(--line)}.cto>*:nth-child(even){padding-left:28px}}
.cto .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-family:"JetBrains Mono",monospace}
.cto .v{font-size:15px;color:var(--hi);text-align:right;overflow-wrap:anywhere}
@media(min-width:500px){.cto .v{font-size:18px}}
.cto a:hover .v{text-decoration:underline;text-underline-offset:4px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:50px 0 36px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;align-items:center}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px}
footer li a{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);transition:color .2s}
footer li a:hover{color:var(--hi)}
footer .c{margin-top:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
footer img{height:20px;width:auto}

/* barra móvil */
.mbar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;padding-left:0;padding-right:0;justify-content:stretch;z-index:100;display:flex;background:rgba(8,8,8,.94);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.mbar{background:rgba(8,8,8,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.mbar a{flex:1;height:56px;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.mbar a.buy{background:var(--acc);color:var(--on-acc)}
@media(min-width:960px){.mbar{display:none}}
.wa{position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:110;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media(min-width:960px){.wa{bottom:24px;right:24px}}
.wa-btn{width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.wa-btn svg{width:28px;height:28px}
.wa-burbuja{position:relative;width:min(300px,calc(100vw - 32px));background:var(--s1);border:1px solid var(--line);padding:18px 16px 16px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.wa-burbuja[hidden]{display:none}
.wa-burbuja b{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.wa-burbuja p{color:var(--hi);margin:8px 0 14px;font-size:15px;line-height:1.45}
.wa-burbuja .btn{width:100%}
.wa-x{position:absolute;top:6px;right:10px;font-size:22px;color:var(--mute);line-height:1}

body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
@media(min-width:960px){body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .fd{opacity:1;transform:none}}

/* ── Sitio de varias páginas (18-oct, pedido del Jefe) ─────────────── */
nav ul a[aria-current=page]{color:var(--hi)}
nav ul a[aria-current=page]::after{content:"";display:block;height:1px;background:var(--hi);margin-top:4px}
.mbar a[aria-current=page]{color:var(--hi);box-shadow:inset 0 2px 0 var(--hi)}
.mbar a.buy[aria-current=page]{box-shadow:none}
.pag{padding-top:110px}
@media(min-width:900px){.pag{padding-top:140px}}
.vermas{display:flex;justify-content:flex-start;margin-top:34px}
a.ph{display:block}
.ac h3 a{display:block}
.ac h3 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.miga{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);display:inline-block;margin-bottom:18px}
.miga:hover{color:var(--hi)}
/* perfil de artista */
.perf{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.perf{grid-template-columns:minmax(280px,420px) 1fr;gap:56px}}
.perf .ph{aspect-ratio:4/5;overflow:hidden;background:var(--s2);border:1px solid var(--line)}
.perf .ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:grayscale(1) contrast(1.1)}
.perf .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.perf h1{font-size:clamp(64px,14vw,150px);padding-top:.12em;margin:8px 0 18px}
.perf .bio{font-size:17px;color:var(--ink);max-width:60ch}
.perf .ln{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sub{margin-top:64px}
.sub h2{font-size:clamp(40px,8vw,72px);padding-top:.12em;margin-bottom:22px}
/* reproductor de SoundCloud que carga al tocar */
.sc{border:1px solid var(--line);background:var(--s1);padding:8px}
.sc iframe{display:block;width:100%;height:450px;border:0}
.sc .tr{display:grid;gap:14px;justify-items:start;padding:24px 18px}
.sc .tr .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.sc .tr p{max-width:52ch;color:var(--ink)}
.sc .tr small{font-size:12px;color:var(--mute)}
.sc>a{display:block;padding:12px 6px 4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.vacio{color:var(--mute);font-size:15px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}