/* ============================================================
   DJSmile — hoja de estilo principal
   Paleta: negro profundo + violeta/cian neón
   ============================================================ */

:root{
	--bg:            #05040a;
	--bg-2:          #0b0916;
	--surface:       #100d1e;
	--surface-2:     #171331;
	--line:          rgba(255,255,255,.09);
	--line-strong:   rgba(255,255,255,.18);

	--txt:           #f2f0ff;
	--txt-dim:       #a49fc4;
	--txt-faint:     #6d6890;

	--neon:          #b14dff;   /* violeta  */
	--neon-2:        #00e5ff;   /* cian     */
	--neon-3:        #ff2d95;   /* magenta  */

	--grad: linear-gradient(115deg, var(--neon) 0%, var(--neon-3) 45%, var(--neon-2) 100%);

	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 24px;

	--ease: cubic-bezier(.22,.9,.28,1);
	--maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:82px; }

body{
	margin:0;
	background:var(--bg);
	color:var(--txt);
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-size:16px;
	line-height:1.65;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
	font-family:'Archivo Black',system-ui,sans-serif;
	font-weight:400;
	letter-spacing:-.02em;
	line-height:1.02;
	margin:0;
}

/* ---- grano de fondo, da textura de club ---- */
.noise{
	position:fixed; inset:0; pointer-events:none; z-index:9999;
	opacity:.035; mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%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:1000;
	display:flex; align-items:center; justify-content:space-between;
	padding:20px clamp(18px,5vw,56px);
	transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s;
	border-bottom:1px solid transparent;
}
.nav.is-stuck{
	background:rgba(5,4,10,.82);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	padding-top:13px; padding-bottom:13px;
	border-bottom-color:var(--line);
}

.nav__logo{
	font-family:'Archivo Black',sans-serif;
	font-size:1.32rem; letter-spacing:.02em;
}
.nav__logo span{
	background:var(--grad);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
	font-size:.86rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
	color:var(--txt-dim); position:relative; padding:6px 0;
	transition:color .25s;
}
.nav__links a::after{
	content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
	background:var(--grad); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--txt); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{
	padding:9px 20px !important; border-radius:100px;
	border:1px solid var(--line-strong); color:var(--txt) !important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{
	border-color:transparent; background:var(--grad);
	box-shadow:0 0 26px rgba(177,77,255,.45);
}

/* Boton "Ayuda iPhone": fuera del menu para que se vea en el movil */
.nav__ios{
	margin-left:28px; padding:8px 16px; border-radius:100px;
	background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
	color:var(--txt); font:inherit; font-size:.76rem; font-weight:600;
	letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
	transition:background .25s, border-color .25s;
}
.nav__ios:hover{ background:rgba(177,77,255,.14); border-color:rgba(177,77,255,.6); }

/* Ventana de ayuda iPhone */
.iosayuda{
	position:fixed; inset:0; z-index:2000; display:none;
	align-items:center; justify-content:center; padding:20px;
	background:rgba(5,4,10,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.iosayuda.is-open{ display:flex; }
.iosayuda__caja{
	position:relative; width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
	padding:30px 26px 24px; border-radius:var(--r-md);
	background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
}
.iosayuda__cerrar{
	position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%;
	background:rgba(255,255,255,.09); border:1px solid var(--line-strong); color:var(--txt);
	font-size:1rem; cursor:pointer;
}
.iosayuda__tit{ font-family:'Archivo Black',sans-serif; font-size:1.2rem; margin:0 40px 10px 0; }
.iosayuda__intro{ color:var(--txt-dim); margin:0 0 16px; }
.iosayuda__pasos{ margin:0 0 16px; padding-left:22px; display:grid; gap:12px; line-height:1.5; }
.iosayuda__pasos b{ color:var(--txt); }
.iosayuda__ico{ white-space:nowrap; }
.iosayuda__nota{ font-size:.86rem; color:var(--txt-dim); margin:10px 0 0; line-height:1.5; }

.nav__burger{
	display:none; flex-direction:column; gap:5px;
	background:none; border:0; cursor:pointer; padding:8px;
}
.nav__burger span{
	width:24px; height:2px; background:var(--txt); border-radius:2px;
	transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
	position:relative; min-height:100svh;
	display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
	text-align:center; padding:120px 20px 40px; overflow:hidden;
}

/* ---- foto de fondo ----
   Se ancla arriba para que la cabina y el publico queden a la vista,
   y hace un zoom lentisimo que da sensacion de directo. */
.hero__bg{
	position:absolute; inset:0;
	/* El ?2 fuerza al navegador a recargar la imagen cuando se
	   cambia el fondo. Si pones una imagen nueva con el mismo
	   nombre, sube ese numero (?3, ?4...) o el navegador
	   seguira mostrando la anterior. */
	background-image:url('img/hero.jpg?2');
	background-size:cover;
	background-position:center center;
	animation:heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom{
	from{ transform:scale(1); }
	to  { transform:scale(1.09); }
}

/* ---- velo oscuro ----
   Sin esto el texto blanco es ilegible sobre una foto tan luminosa.
   Es degradado: casi transparente arriba (se ve el escenario) y
   opaco abajo (donde van los botones). */
/* Esta imagen ya es oscura de por si, asi que el velo es
   suave: solo lo justo para que el texto de abajo se lea
   y para fundir el borde inferior con el resto de la web. */
.hero__veil{
	position:absolute; inset:0;
	background:
		linear-gradient(180deg,
			rgba(5,4,10,.35) 0%,     /* barra del menu */
			rgba(5,4,10,.00) 14%,    /* el nombre DJSmile: limpio */
			rgba(5,4,10,.00) 48%,    /* la silueta del DJ: limpia */
			rgba(5,4,10,.45) 66%,
			rgba(5,4,10,.85) 84%,
			var(--bg) 100%);
}

.hero__viz{
	position:absolute; inset:0; width:100%; height:100%;
	opacity:.28; mix-blend-mode:screen;
}

.hero__inner{ position:relative; z-index:2; max-width:900px; }

/* Oculto a la vista pero legible por Google y lectores de pantalla. */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hero__kicker{
	margin:0 0 20px; font-size:.76rem; letter-spacing:.34em; text-transform:uppercase;
	color:var(--txt);
	text-shadow:0 2px 14px rgba(0,0,0,.95);
}

.hero__genres{
	display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
	margin:0 0 22px; padding:0;
}
/* Botones de estilo: filtran la lista de canciones al pulsarlos */
.gen{
	font-family:'Inter',sans-serif;
	font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
	padding:8px 16px; border-radius:100px; cursor:pointer;
	border:1px solid rgba(255,255,255,.28); color:var(--txt);
	background:rgba(10,7,20,.55);
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	transition:background .25s, border-color .25s, transform .2s var(--ease), box-shadow .25s;
}
.gen:hover{
	background:rgba(177,77,255,.28);
	border-color:rgba(177,77,255,.7);
	transform:translateY(-2px);
}
.gen.is-on{
	background:var(--grad); border-color:transparent; color:#fff;
	box-shadow:0 0 22px rgba(177,77,255,.65);
}

.hero__sub{
	margin:0 auto 32px; max-width:520px;
	color:var(--txt); font-size:1.02rem;
	text-shadow:0 2px 16px rgba(0,0,0,.95);
}

.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero__stats{
	position:relative; z-index:2;
	display:flex; justify-content:center; margin-top:40px;
}

.hero__scroll{
	position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
	width:26px; height:42px; border:2px solid var(--line-strong); border-radius:100px;
	display:flex; justify-content:center; padding-top:7px;
}
.hero__scroll span{
	width:3px; height:8px; border-radius:2px; background:var(--neon);
	animation:scrolldot 1.7s ease-in-out infinite;
}
@keyframes scrolldot{
	0%,100%{ transform:translateY(0);    opacity:1; }
	60%    { transform:translateY(13px); opacity:0; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
	display:inline-block; cursor:pointer; border:0;
	padding:15px 34px; border-radius:100px;
	font-family:'Inter',sans-serif; font-size:.86rem; font-weight:600;
	letter-spacing:.1em; text-transform:uppercase;
	transition:transform .25s var(--ease), box-shadow .3s, background .3s, color .3s;
}
.btn--primary{
	background:var(--grad); color:#fff;
	box-shadow:0 6px 34px rgba(177,77,255,.4);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 12px 44px rgba(177,77,255,.6); }
.btn--ghost{
	background:transparent; color:var(--txt); border:1px solid var(--line-strong);
}
.btn--ghost:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }
.btn--block{ width:100%; }

/* ============================================================
   SECCIONES
   ============================================================ */
.section{
	position:relative;
	max-width:var(--maxw); margin:0 auto;
	padding:clamp(80px,11vw,150px) clamp(18px,5vw,40px);
}
.section--bio{ background:linear-gradient(180deg,transparent,var(--bg-2) 25%,var(--bg-2) 75%,transparent); max-width:none; }
.section--bio > *{ max-width:var(--maxw); margin-inline:auto; }

.section__head{ margin-bottom:56px; }
.section__kicker{
	margin:0 0 12px; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
	color:var(--neon);
}
.section__title{
	font-size:clamp(2.3rem,6vw,4.2rem); margin:0 0 14px;
}
.section__desc{ margin:0; color:var(--txt-dim); max-width:520px; }
.section__desc a{ color:var(--neon-2); border-bottom:1px solid currentColor; }

/* ============================================================
   REPRODUCTOR
   ============================================================ */
.player{
	display:grid; grid-template-columns:190px 1fr; gap:30px;
	background:linear-gradient(145deg,var(--surface),var(--surface-2));
	border:1px solid var(--line); border-radius:var(--r-lg);
	padding:26px; margin-bottom:34px;
	box-shadow:0 26px 70px rgba(0,0,0,.55);
	-webkit-user-select:none; user-select:none;
}

.player__art{
	position:relative; width:100%; height:190px; align-self:center;
	border-radius:var(--r-md); overflow:hidden;
	background:radial-gradient(circle at 30% 25%, #2a1d55, #0a0714);
	background-size:cover; background-position:center;
	display:grid; place-items:center;
	transition:background-image .35s var(--ease);
}

/* Con caratula: el vinilo se queda pequeno en una esquina, girando
   sobre la imagen. Asi se ve la portada Y se nota que esta sonando. */
.player__art.tiene-img::after{
	content:''; position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(5,4,10,.15), rgba(5,4,10,.55));
}
.player__art.tiene-img .player__disc{
	position:absolute; right:10px; bottom:10px;
	height:52px; z-index:2;
	box-shadow:0 0 18px rgba(0,0,0,.8), inset 0 0 12px rgba(0,0,0,.7);
}
.player__disc{
	height:74%; aspect-ratio:1; border-radius:50%;
	background:
		radial-gradient(circle, #05040a 0 17%, transparent 17.5%),
		repeating-radial-gradient(circle, #1c1836 0 2px, #12102a 2px 4px);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 0 40px rgba(177,77,255,.35), inset 0 0 30px rgba(0,0,0,.7);
	position:relative;
}
.player__disc::after{
	content:''; position:absolute; inset:34%; border-radius:50%;
	background:var(--grad);
	box-shadow:0 0 22px rgba(177,77,255,.7);
}
.player.is-playing .player__disc{ animation:spin 3.4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.player__main{ display:flex; flex-direction:column; justify-content:center; min-width:0; }

.player__meta{ margin-bottom:14px; }
.player__now{
	margin:0; font-family:'Archivo Black',sans-serif;
	font-size:clamp(1.15rem,2.6vw,1.7rem); line-height:1.2;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__genre{
	margin:5px 0 0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
	color:var(--neon-2);
}

.player__wave{ width:100%; height:72px; display:block; margin-bottom:6px; }

.player__bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.player__time{
	font-size:.75rem; color:var(--txt-faint); font-variant-numeric:tabular-nums;
	min-width:38px; text-align:center;
}
.player__seek{
	position:relative; flex:1; height:6px; border-radius:100px; cursor:pointer;
	background:rgba(255,255,255,.09);
}
.player__seek-fill{
	position:absolute; left:0; top:0; bottom:0; width:0;
	border-radius:100px; background:var(--grad);
}
.player__seek-knob{
	position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
	width:14px; height:14px; border-radius:50%; background:#fff;
	box-shadow:0 0 12px rgba(177,77,255,.9);
	opacity:0; transition:opacity .2s;
}
.player__seek:hover .player__seek-knob{ opacity:1; }

.player__controls{ display:flex; align-items:center; gap:12px; }

.pbtn{
	display:grid; place-items:center; cursor:pointer;
	width:42px; height:42px; border-radius:50%;
	background:rgba(255,255,255,.06); border:1px solid var(--line);
	color:var(--txt); font-size:.95rem;
	transition:background .25s, transform .2s var(--ease), border-color .25s;
}
.pbtn:hover{ background:rgba(255,255,255,.13); transform:scale(1.09); border-color:var(--line-strong); }
.pbtn--play{
	width:58px; height:58px; font-size:1.15rem;
	background:var(--grad); border:0; color:#fff;
	box-shadow:0 6px 26px rgba(177,77,255,.5);
}
.pbtn--sm{ width:36px; height:36px; font-size:.85rem; }

/* ---- boton de enviar a la TV ----
   Siempre visible: si hay Chromecast envia directo, y si no
   abre las instrucciones para hacerlo desde el navegador.
   Cuando esta conectado se pone en cian. */
.pbtn--cast.is-casting{
	background:rgba(0,229,255,.22); border-color:var(--neon-2);
	color:var(--neon-2);
	box-shadow:0 0 18px rgba(0,229,255,.5);
	animation:castPulse 2s ease-in-out infinite;
}
@keyframes castPulse{
	0%,100%{ box-shadow:0 0 18px rgba(0,229,255,.5); }
	50%    { box-shadow:0 0 26px rgba(0,229,255,.85); }
}

.player__vol{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.player__vol input[type=range]{
	-webkit-appearance:none; appearance:none;
	width:92px; height:4px; border-radius:100px; cursor:pointer;
	background:rgba(255,255,255,.14);
}
.player__vol input[type=range]::-webkit-slider-thumb{
	-webkit-appearance:none; width:13px; height:13px; border-radius:50%;
	background:var(--neon); box-shadow:0 0 10px rgba(177,77,255,.8); cursor:pointer;
}
.player__vol input[type=range]::-moz-range-thumb{
	width:13px; height:13px; border:0; border-radius:50%;
	background:var(--neon); box-shadow:0 0 10px rgba(177,77,255,.8); cursor:pointer;
}

/* ---- aviso de filtro activo ---- */
.filtro{
	display:flex; align-items:center; justify-content:center;
	margin:0 0 16px; padding:12px 18px; border-radius:var(--r-md);
	background:linear-gradient(90deg, rgba(177,77,255,.14), rgba(0,229,255,.05));
	border:1px solid rgba(177,77,255,.35);
	text-align:center;
}
.filtro[hidden]{ display:none; }

.filtro__txt{ font-size:.88rem; color:var(--txt-dim); }
.filtro__txt strong{
	color:var(--txt); text-transform:uppercase; letter-spacing:.1em;
	font-size:.82rem;
}

/* ---- lista de tracks ---- */
.tracklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

/* ---- vista en columnas ----
   Una columna por estilo, para aprovechar el ancho de la
   pantalla y no tener que bajar tanto con muchas canciones.
   Las columnas se reparten solas segun el sitio que haya. */
.tracklist--cols{
	display:grid;
	/* 420px de minimo: columnas mas anchas, para que quepan
	   los nombres largos junto a las etiquetas NEW y la llama.
	   Salen menos columnas por fila, pero se lee mucho mejor. */
	grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
	gap:14px;
	align-items:start;
}

.grupo{
	background:rgba(255,255,255,.02);
	border:1px solid var(--line);
	border-radius:var(--r-md);
	padding:14px 12px 12px;
}

.grupo__titulo{
	display:flex; align-items:center; gap:8px;
	margin:0 0 10px; padding:0 4px 10px;
	border-bottom:1px solid var(--line);
	font-family:'Archivo Black',sans-serif;
	font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
	background:var(--grad);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}

/* El numero de canciones del estilo */
.grupo__n{
	margin-left:auto;
	padding:2px 8px; border-radius:100px;
	background:rgba(255,255,255,.07);
	color:var(--txt-faint);
	font-family:'Inter',sans-serif;
	font-size:.66rem; letter-spacing:0;
	-webkit-text-fill-color:var(--txt-faint);
}

.grupo__lista{
	list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; gap:5px;
}

/* Dentro de una columna las filas van mas compactas */
.tracklist--cols .trk{
	grid-template-columns:26px minmax(0,1fr) auto auto auto;
	gap:7px; padding:9px 10px;
}
.tracklist--cols .trk__dur,
.tracklist--cols .trk__play{ display:none; }
.tracklist--cols .trk__name{ font-size:.9rem; }
.tracklist--cols .trk__linea{ min-width:0; }
.tracklist--cols .trk__genre{ display:none; }
.tracklist--cols .trk__n{ font-size:.8rem; }
.tracklist--cols .trk__vid{ padding:0; width:26px; font-size:.66rem; }
.tracklist--cols .trk__vid span{ display:none; }
.tracklist--cols .trk__share{ width:26px; font-size:.78rem; }
.tracklist--cols .trk__like{ padding:0 7px; min-width:26px; gap:3px; }
.tracklist--cols .trk__like-ico{ font-size:.85rem; }
.tracklist--cols .trk__like-n{ font-size:.66rem; }
.tracklist--cols .trk:hover{ transform:translateX(3px); }

.trk{
	display:grid; grid-template-columns:44px minmax(0,1fr) auto auto auto auto auto auto;
	align-items:center; gap:10px;
	padding:14px 20px; border-radius:var(--r-md); cursor:pointer;
	background:rgba(255,255,255,.025); border:1px solid transparent;
	transition:background .25s, border-color .25s, transform .2s var(--ease);
}
.trk:hover{ background:rgba(255,255,255,.06); border-color:var(--line); transform:translateX(5px); }
.trk.is-active{
	background:linear-gradient(90deg, rgba(177,77,255,.16), rgba(0,229,255,.06));
	border-color:rgba(177,77,255,.42);
}
.trk__n{
	font-family:'Archivo Black',sans-serif; font-size:.95rem; color:var(--txt-faint);
	text-align:center;
}
.trk.is-active .trk__n{
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.trk__info{ min-width:0; }

/* Linea del titulo: el nombre se encoge si hace falta, pero
   las etiquetas NEW y la llama se quedan SIEMPRE visibles. */
.trk__linea{
	display:flex; align-items:center; gap:0;
	min-width:0;
}
.trk__name{
	margin:0; font-weight:600; font-size:1rem;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	min-width:0;            /* permite que se recorte */
	flex:0 1 auto;          /* cede espacio a las etiquetas */
}
.trk__genre{
	margin:2px 0 0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--txt-faint);
}
.trk__dur{ font-size:.82rem; color:var(--txt-faint); font-variant-numeric:tabular-nums; }
.trk__play{
	width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
	background:rgba(255,255,255,.07); font-size:.72rem;
	transition:background .25s;
}
.trk:hover .trk__play{ background:var(--grad); }

/* barras animadas cuando suena */
.trk__eq{ display:flex; align-items:flex-end; gap:2px; height:15px; }
.trk__eq i{ width:3px; background:var(--neon-2); border-radius:2px; animation:eq .9s ease-in-out infinite; }
.trk__eq i:nth-child(2){ animation-delay:.18s; }
.trk__eq i:nth-child(3){ animation-delay:.36s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:15px; } }

.tracks__note{
	margin:26px 0 0; font-size:.8rem; color:var(--txt-faint); text-align:center;
}

/* ---- boton de videoclip en la lista ---- */
.trk__vid{
	display:grid; place-items:center;
	width:auto; height:28px; padding:0 11px; border-radius:100px;
	background:rgba(255,255,255,.07); border:1px solid var(--line-strong);
	font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
	color:var(--txt-dim); white-space:nowrap;
	transition:background .25s, color .25s, border-color .25s;
}
.trk__vid:hover{
	background:var(--grad); color:#fff; border-color:transparent;
	box-shadow:0 0 18px rgba(177,77,255,.6);
}

/* ---- boton de apoyar ----
   Rosa del corazon: destaca sin parecer un boton de compra
   agresivo, y se distingue del boton de video de un vistazo. */
.trk__buy{
	display:grid; place-items:center;
	height:28px; padding:0 14px; border-radius:100px; cursor:pointer;
	background:rgba(255,45,149,.13); border:1px solid rgba(255,45,149,.45);
	font-family:'Inter',sans-serif;
	font-size:.68rem; font-weight:700; letter-spacing:.06em;
	color:#ff5fae; white-space:nowrap;
	transition:background .25s, color .25s, transform .2s var(--ease);
}
.trk__buy:hover{
	background:var(--neon-3); color:#fff; transform:scale(1.06);
	box-shadow:0 0 22px rgba(255,45,149,.65);
}

/* ---- panel de ayuda para ver en la TV ---- */
.tvhelp{
	position:fixed; inset:0; z-index:3100;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(16px,5vw,40px);
	background:rgba(3,2,8,.94);
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.tvhelp[hidden]{ display:none; }

.tvhelp__box{
	position:relative; width:min(480px,100%);
	max-height:86svh; overflow-y:auto;
	padding:30px clamp(20px,5vw,34px);
	border-radius:var(--r-lg);
	background:linear-gradient(150deg,var(--surface),var(--surface-2));
	border:1px solid var(--line-strong);
	box-shadow:0 26px 80px rgba(0,0,0,.75);
}

.tvhelp__title{
	margin:0 0 18px; font-size:1.3rem;
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tvhelp__lead{ margin:0 0 16px; color:var(--txt); font-size:.98rem; }

.tvhelp__sub{
	margin:20px 0 8px; font-size:.72rem; letter-spacing:.18em;
	text-transform:uppercase; color:var(--neon-2);
}

.tvhelp__pasos{
	margin:0 0 14px; padding-left:20px;
	color:var(--txt-dim); font-size:.92rem; line-height:1.75;
}
.tvhelp__pasos li{ margin-bottom:5px; }
.tvhelp__pasos strong{ color:var(--txt); }

.tvhelp__nota{
	margin:14px 0 0; padding-top:14px;
	border-top:1px solid var(--line);
	font-size:.84rem; color:var(--txt-faint);
}
.tvhelp__nota strong{ color:var(--txt-dim); }

/* ---- codigo QR para compartir ---- */
.tvhelp__qr{
	margin-top:22px; padding-top:20px;
	border-top:1px solid var(--line);
	text-align:center;
}
.tvhelp__qr[hidden]{ display:none; }
.tvhelp__qr .tvhelp__sub{ margin-top:0; }

.tvhelp__qrbox{
	display:inline-block; padding:12px; border-radius:var(--r-md);
	background:#fff; line-height:0;
	box-shadow:0 0 30px rgba(177,77,255,.35);
}
.tvhelp__qrbox img,
.tvhelp__qrbox canvas{ display:block; }

.tvhelp__qr .tvhelp__nota{
	border-top:0; padding-top:10px; margin-top:6px;
}

.tvhelp__close{
	position:absolute; top:14px; right:14px;
	width:38px; height:38px; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.08); border:1px solid var(--line-strong);
	color:var(--txt); font-size:1.05rem;
	transition:background .25s, transform .2s var(--ease);
}
.tvhelp__close:hover{ background:rgba(255,45,149,.28); transform:rotate(90deg); }

/* ---- etiqueta NEW ----
   Sale durante 30 dias desde la fecha de subida y luego
   desaparece sola. El brillo late para que llame la atencion
   sin ser molesto. */
.trk__new{
	display:inline-block; vertical-align:middle;
	flex:0 0 auto;          /* nunca se encoge ni desaparece */
	margin-left:8px; padding:2px 8px;
	border-radius:100px;
	background:var(--grad);
	color:#fff;
	font-family:'Inter',sans-serif;
	font-size:.58rem; font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	box-shadow:0 0 12px rgba(255,45,149,.7);
	animation:latidoNew 2s ease-in-out infinite;
}

@keyframes latidoNew{
	0%, 100% {
		box-shadow:0 0 10px rgba(255,45,149,.55);
		transform:scale(1);
	}
	50% {
		box-shadow:0 0 20px rgba(255,45,149,.95);
		transform:scale(1.06);
	}
}

/* En las columnas y en movil, algo mas pequeña */
.tracklist--cols .trk__new{
	margin-left:6px; padding:2px 6px; font-size:.54rem;
}

/* ---- llama HOT ----
   Solo sale en las canciones que marques con  hot: true
   Se mueve como una llama de verdad: oscila y cambia de
   tamaño, con un resplandor naranja detras. */
.trk__hot{
	display:inline-block; vertical-align:middle;
	flex:0 0 auto;          /* nunca se encoge ni desaparece */
	margin-left:6px;
	font-size:.92rem; line-height:1;
	filter:drop-shadow(0 0 6px rgba(255,120,0,.9));
	animation:llama 1.4s ease-in-out infinite;
	transform-origin:50% 90%;
}

@keyframes llama{
	0%, 100% { transform:scale(1)    rotate(-4deg); filter:drop-shadow(0 0 6px  rgba(255,120,0,.85)); }
	25%      { transform:scale(1.15) rotate(3deg);  filter:drop-shadow(0 0 12px rgba(255,80,0,1));    }
	50%      { transform:scale(1.05) rotate(-2deg); filter:drop-shadow(0 0 9px  rgba(255,160,0,.95)); }
	75%      { transform:scale(1.18) rotate(4deg);  filter:drop-shadow(0 0 14px rgba(255,60,0,1));    }
}

.tracklist--cols .trk__hot{ margin-left:5px; font-size:.85rem; }

/* ---- corazon de me gusta ----
   Apagado es un contorno gris; al pulsarlo se rellena en rosa
   y se queda asi para siempre en ese navegador. El numero de
   al lado es el total de TODA la gente, no solo tuyo. */
.trk__like{
	display:flex; align-items:center; justify-content:center; gap:5px;
	height:28px; min-width:30px; padding:0 9px; border-radius:100px;
	cursor:pointer;
	background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
	color:var(--txt-dim); font-family:'Inter',sans-serif;
	font-size:.9rem; line-height:1;
	transition:background .25s, color .25s, transform .2s var(--ease);
}
.trk__like:hover{
	background:rgba(255,45,149,.16);
	border-color:rgba(255,45,149,.5);
	color:#ff5fae;
}
.trk__like.is-on{
	background:rgba(255,45,149,.18);
	border-color:rgba(255,45,149,.55);
	color:#ff5fae;
	cursor:default;
}

.trk__like-ico{ font-size:.95rem; }

.trk__like-n{
	font-size:.72rem; font-weight:700;
	font-variant-numeric:tabular-nums;
}
.trk__like-n:empty{ display:none; }

/* Latido al dar like */
.trk__like.late .trk__like-ico{ animation:latido .5s var(--ease); }
@keyframes latido{
	0%   { transform:scale(1); }
	35%  { transform:scale(1.45); }
	60%  { transform:scale(.9); }
	100% { transform:scale(1); }
}

/* ---- boton de compartir en cada cancion ---- */
.trk__share{
	display:grid; place-items:center;
	width:30px; height:28px; border-radius:100px; cursor:pointer;
	background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
	color:var(--txt-dim); font-size:.9rem;
	transition:background .25s, color .25s, transform .2s var(--ease);
}
.trk__share:hover{
	background:var(--grad); color:#fff; border-color:transparent;
	transform:scale(1.1);
	box-shadow:0 0 18px rgba(177,77,255,.6);
}

/* ---- panel de compartir ---- */
.share{
	position:fixed; inset:0; z-index:3200;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(16px,5vw,40px);
	background:rgba(3,2,8,.94);
	backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.share[hidden]{ display:none; }

.share__box{
	position:relative; width:min(440px,100%);
	padding:30px clamp(20px,5vw,32px);
	border-radius:var(--r-lg);
	background:linear-gradient(150deg,var(--surface),var(--surface-2));
	border:1px solid var(--line-strong);
	box-shadow:0 26px 80px rgba(0,0,0,.75);
	text-align:center;
}

.share__kicker{
	margin:0 0 6px; font-size:.66rem; letter-spacing:.32em;
	text-transform:uppercase; color:var(--txt-faint);
}
.share__title{
	margin:0 0 22px; font-size:1.3rem;
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.share__acciones{
	display:flex; flex-direction:column; gap:10px; margin-bottom:20px;
}

.sbtn{
	font-family:'Inter',sans-serif; cursor:pointer;
	padding:13px 18px; border-radius:100px;
	font-size:.86rem; font-weight:600; letter-spacing:.04em;
	background:rgba(255,255,255,.07); border:1px solid var(--line-strong);
	color:var(--txt);
	transition:background .25s, transform .2s var(--ease), border-color .25s;
}
.sbtn:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }

.sbtn--wa{
	background:rgba(37,211,102,.16); border-color:rgba(37,211,102,.5); color:#3ddc84;
}
.sbtn--wa:hover{ background:#25d366; color:#04240f; }

/* El boton del movil va destacado y mas alto: es el que
   abre Instagram, TikTok y todo lo que tengas instalado */
.sbtn--nativo{
	background:var(--grad); border-color:transparent; color:#fff;
	box-shadow:0 4px 20px rgba(177,77,255,.4);
	display:flex; flex-direction:column; gap:3px;
	padding:14px 18px;
	margin-bottom:6px;
}
.sbtn--nativo small{
	font-size:.66rem; font-weight:500; opacity:.85;
	letter-spacing:.02em;
}

/* Colores de cada red, para reconocerlas de un vistazo */
.sbtn--fb{
	background:rgba(24,119,242,.16); border-color:rgba(24,119,242,.5); color:#6ba7f5;
}
.sbtn--fb:hover{ background:#1877f2; color:#fff; }

.sbtn--tg{
	background:rgba(42,171,238,.14); border-color:rgba(42,171,238,.45); color:#5fc4f0;
}
.sbtn--tg:hover{ background:#2aabee; color:#02303f; }

.sbtn--x{
	background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); color:var(--txt);
}
.sbtn--x:hover{ background:#fff; color:#000; }

/* ---- campo del enlace ---- */
.share__enlace{
	display:flex; gap:8px;
	padding-top:18px; border-top:1px solid var(--line);
}
.share__enlace input{
	flex:1; min-width:0;
	padding:11px 13px; border-radius:var(--r-sm);
	background:rgba(0,0,0,.4); border:1px solid var(--line);
	color:var(--txt-dim); font-family:inherit; font-size:.8rem;
}
.share__enlace input:focus{ outline:none; border-color:var(--neon); color:var(--txt); }

.share__enlace button{
	font-family:'Inter',sans-serif; cursor:pointer; white-space:nowrap;
	padding:11px 18px; border-radius:var(--r-sm);
	background:var(--grad); border:0; color:#fff;
	font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	transition:transform .2s var(--ease), box-shadow .25s;
}
.share__enlace button:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(177,77,255,.5); }

.share__aviso{
	margin:12px 0 0; font-size:.8rem; min-height:18px; color:var(--txt-faint);
}
.share__aviso.ok{ color:var(--neon-2); }

.share__close{
	position:absolute; top:14px; right:14px;
	width:38px; height:38px; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.08); border:1px solid var(--line-strong);
	color:var(--txt); font-size:1.05rem;
	transition:background .25s, transform .2s var(--ease);
}
.share__close:hover{ background:rgba(255,45,149,.28); transform:rotate(90deg); }

/* ---- visor de videoclip a pantalla completa ---- */
.vplayer{
	position:fixed; inset:0; z-index:3000;
	display:flex; align-items:center; justify-content:center;
	padding:clamp(14px,4vw,44px);
	background:rgba(3,2,8,.96);
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
	-webkit-user-select:none; user-select:none;
}
.vplayer[hidden]{ display:none; }

.vplayer__box{ width:min(1100px,100%); }

.vplayer video{
	width:100%; max-height:78svh; display:block;
	border-radius:var(--r-md); background:#000;
	border:1px solid var(--line-strong);
	box-shadow:0 26px 80px rgba(0,0,0,.8), 0 0 60px rgba(177,77,255,.22);
}

.vplayer__title{
	margin:16px 0 0; text-align:center;
	font-family:'Archivo Black',sans-serif; font-size:clamp(1rem,2.4vw,1.5rem);
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.vplayer__close{
	position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
	width:46px; height:46px; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.09); border:1px solid var(--line-strong);
	color:var(--txt); font-size:1.25rem;
	transition:background .25s, transform .2s var(--ease);
}
.vplayer__close:hover{ background:rgba(255,45,149,.28); transform:rotate(90deg); }

/* ============================================================
   BIO
   ============================================================ */
.bio{ display:grid; grid-template-columns:380px 1fr; gap:clamp(30px,6vw,70px); align-items:start; }

.bio__photo{ position:relative; }
.bio__photo::before{
	content:''; position:absolute; inset:-14px; border-radius:var(--r-lg);
	background:var(--grad); filter:blur(28px); opacity:.4; z-index:0;
}
.bio__photo-inner{
	position:relative; z-index:1; aspect-ratio:3/4; border-radius:var(--r-lg);
	background:linear-gradient(160deg,#1a1435,#0a0714);
	border:1px solid var(--line-strong);
	background-size:cover; background-position:center;
	display:grid; place-items:center;
}
.bio__photo-inner::after{
	content:'🎧'; font-size:4.5rem; opacity:.22;
}
.bio__photo-inner.has-img::after{ content:none; }

.bio__text p{ margin:0 0 18px; color:var(--txt-dim); }
.bio__text strong{ color:var(--txt); font-weight:600; }
.bio__lead{ font-size:1.14rem; color:var(--txt) !important; }

.bio__facts{
	list-style:none; margin:34px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
	background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.bio__facts li{ background:var(--surface); padding:16px 18px; }
.bio__facts span{
	display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
	color:var(--txt-faint); margin-bottom:5px;
}
.bio__facts strong{ font-size:.9rem; font-weight:600; }

/* ============================================================
   FECHAS
   ============================================================ */
.dates{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

.date{
	display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:22px;
	padding:20px 24px; border-radius:var(--r-md);
	background:rgba(255,255,255,.025); border:1px solid var(--line);
	transition:border-color .3s, background .3s, transform .25s var(--ease);
}
.date:hover{ border-color:rgba(177,77,255,.45); background:rgba(177,77,255,.06); transform:translateX(5px); }
.date--past{ opacity:.4; }

.date__day{ text-align:center; }
.date__day strong{
	display:block; font-family:'Archivo Black',sans-serif; font-size:1.85rem; line-height:1;
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.date__day span{
	font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-faint);
}
.date__venue{ margin:0; font-weight:600; font-size:1.05rem; }
.date__city{ margin:3px 0 0; font-size:.82rem; color:var(--txt-faint); }
.date__tag{
	font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
	padding:7px 15px; border-radius:100px; border:1px solid var(--line-strong); color:var(--txt-dim);
	white-space:nowrap;
}
.date__tag--soon{ border-color:transparent; background:var(--grad); color:#fff; }

.empty{
	padding:46px 24px; text-align:center; color:var(--txt-faint);
	border:1px dashed var(--line-strong); border-radius:var(--r-md);
}

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{
	display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:14px; grid-auto-rows:230px;
}
.gal{
	position:relative; overflow:hidden; border-radius:var(--r-md);
	background:linear-gradient(150deg,#1a1435,#0a0714);
	border:1px solid var(--line); cursor:pointer;
	background-size:cover; background-position:center;
	transition:transform .4s var(--ease), border-color .3s;
}
.gal:hover{ transform:scale(1.03); border-color:rgba(177,77,255,.5); }
.gal--tall{ grid-row:span 2; }
.gal--wide{ grid-column:span 2; }
.gal__ph{
	position:absolute; inset:0; display:grid; place-items:center;
	font-size:2rem; opacity:.2;
}
.gal__cap{
	position:absolute; left:0; right:0; bottom:0; padding:16px;
	background:linear-gradient(transparent,rgba(5,4,10,.92));
	font-size:.8rem; font-weight:500;
	transform:translateY(100%); transition:transform .35s var(--ease);
}
.gal:hover .gal__cap{ transform:translateY(0); }

/* lightbox */
.lightbox{
	position:fixed; inset:0; z-index:2000; display:none;
	align-items:center; justify-content:center; padding:30px;
	background:rgba(5,4,10,.94); backdrop-filter:blur(10px);
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:var(--r-md); }
.lightbox__close{
	position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%;
	background:rgba(255,255,255,.09); border:1px solid var(--line-strong); color:var(--txt);
	font-size:1.3rem; cursor:pointer;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.section--contact{ padding-bottom:clamp(70px,9vw,110px); }
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:start; }
.contact__desc{ color:var(--txt-dim); margin:0 0 30px; max-width:420px; }

.contact__mail{
	display:inline-block; font-family:'Archivo Black',sans-serif;
	font-size:clamp(1.05rem,2.4vw,1.5rem);
	background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
	border-bottom:2px solid rgba(177,77,255,.4); padding-bottom:3px;
	word-break:break-all;
}

.socials{ display:flex; gap:11px; flex-wrap:wrap; margin-top:32px; }
.soc{
	display:flex; align-items:center; gap:9px;
	padding:11px 19px; border-radius:100px;
	background:rgba(255,255,255,.04); border:1px solid var(--line);
	font-size:.82rem; font-weight:500;
	transition:background .28s, border-color .28s, transform .22s var(--ease);
}
.soc:hover{ background:rgba(177,77,255,.14); border-color:rgba(177,77,255,.5); transform:translateY(-3px); }

.contact__form{
	background:linear-gradient(145deg,var(--surface),var(--surface-2));
	border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
}
.field{ margin-bottom:18px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.field--row .field{ margin:0; }
.field label{
	display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
	color:var(--txt-faint); margin-bottom:8px;
}
.field input, .field textarea{
	width:100%; padding:13px 15px; border-radius:var(--r-sm);
	background:rgba(0,0,0,.32); border:1px solid var(--line);
	color:var(--txt); font-family:inherit; font-size:.95rem;
	transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus{
	outline:none; border-color:var(--neon);
	box-shadow:0 0 0 3px rgba(177,77,255,.16);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--txt-faint); }
.field textarea{ resize:vertical; }
.field.is-bad input, .field.is-bad textarea{ border-color:var(--neon-3); }

.form__note{ margin:14px 0 0; font-size:.85rem; text-align:center; min-height:20px; }
.form__note.ok{ color:var(--neon-2); }
.form__note.bad{ color:var(--neon-3); }

/* ============================================================
   FOOTER
   ============================================================ */
/* ---- contador de visitas ----
   Cada cifra en su propia casilla, estilo marcador. 7 posiciones
   fijas: los ceros de delante se pintan apagados para que el
   numero no baile de ancho al subir de cifra. */
.visitas{ margin:0; text-align:center; }

.visitas__label{
	margin:9px 0 0; font-size:.66rem; letter-spacing:.32em;
	text-transform:uppercase; color:var(--txt-dim);
	text-shadow:0 2px 12px rgba(0,0,0,.95);
}

.visitas__digitos{
	display:inline-flex; gap:5px;
	padding:11px 13px; border-radius:var(--r-md);
	background:rgba(0,0,0,.55); border:1px solid var(--line-strong);
	box-shadow:inset 0 2px 14px rgba(0,0,0,.75), 0 6px 26px rgba(0,0,0,.5);
	backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

.visitas__d{
	display:grid; place-items:center;
	min-width:26px; padding:6px 0;
	border-radius:6px;
	background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
	border:1px solid var(--line);
	font-family:'Archivo Black',monospace;
	font-size:1.18rem; line-height:1;
	color:var(--txt-faint);
	font-variant-numeric:tabular-nums;
}

/* Las cifras que cuentan de verdad: en neon */
.visitas__d--on{
	background:linear-gradient(180deg, rgba(177,77,255,.22), rgba(0,229,255,.10));
	border-color:rgba(177,77,255,.5);
	color:#fff;
	text-shadow:0 0 14px rgba(177,77,255,.9);
}

/* Separador de miles */
.visitas__sep{
	align-self:flex-end; padding-bottom:8px;
	color:var(--neon); font-weight:700;
}

.footer{
	border-top:1px solid var(--line); padding:34px 20px; text-align:center;
	color:var(--txt-faint); font-size:.85rem;
}
.footer p{ margin:0 0 7px; }
.footer__small{ font-size:.74rem; opacity:.7; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
	.bio{ grid-template-columns:1fr; }
	.bio__photo{ max-width:330px; }
	.contact{ grid-template-columns:1fr; }
	.player{ grid-template-columns:1fr; }
	.player__art{ width:210px; height:210px; margin:0 auto; }
}

@media (max-width:720px){
	.nav__burger{ display:flex; }
	.nav__ios{ margin-left:auto; margin-right:10px; padding:7px 12px; font-size:.7rem; }
	.nav__links{
		position:fixed; inset:0 0 auto; top:0; padding:96px 30px 40px;
		flex-direction:column; align-items:flex-start; gap:6px;
		background:rgba(5,4,10,.97); backdrop-filter:blur(20px);
		height:100svh; transform:translateX(100%); transition:transform .4s var(--ease);
	}
	.nav__links.is-open{ transform:none; }
	.nav__links a{ font-size:1.4rem; padding:13px 0; }
	.nav__cta{ margin-top:14px; }

	/* En movil se sirve la foto ligera (165 KB en vez de 582 KB)
	   y se encuadra en el DJ, que es lo que se ve bien en vertical. */
	/* Foto de movil.
	   Si existe hero-vertical.jpg (formato 9:16) se usa a pantalla
	   completa. Si no, cae en la panoramica ajustada a lo ancho.
	   El navegador coge la ultima que consigue cargar. */
	.hero__bg{
		background-image:url('img/hero-movil.jpg?2');
		background-size:100% auto;
		background-position:center top;
		background-repeat:no-repeat;
		background-color:transparent;
		animation:none;
		/* La foto panoramica en pantalla estrecha ocupa ~24% del alto.
		   El fundido va justo ahi para que el borde no se vea. */
		-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 15%, transparent 25%);
		mask-image:linear-gradient(180deg, #000 0%, #000 15%, transparent 25%);
	}
	/* Tinte que continua la escena bajo la foto: evita el corte
	   seco a negro cuando la imagen no llega abajo del todo. */
	.hero::before{
		content:''; position:absolute; inset:0; z-index:0;
		background:
			radial-gradient(ellipse 120% 50% at 50% 22%, rgba(255,120,60,.20), transparent 60%),
			radial-gradient(ellipse 100% 60% at 50% 62%, rgba(120,40,180,.30), transparent 70%),
			linear-gradient(180deg, #1a0f2e 0%, #0d0819 55%, var(--bg) 100%);
	}
	.hero{ justify-content:flex-end; padding-top:96px; }
	.hero__veil{
		background:linear-gradient(180deg,
			rgba(5,4,10,.42) 0%,
			rgba(5,4,10,.05) 14%,
			rgba(5,4,10,.10) 30%,
			rgba(5,4,10,.88) 46%,
			var(--bg) 58%,
			var(--bg) 100%);
	}

	/* ---- FOTO VERTICAL PARA MOVIL (opcional) ----
	   Pon una imagen vertical (9:16) llamada  hero-vertical.jpg
	   dentro de assets/img/ y el movil pasara solo a pantalla
	   completa. Mientras no exista, se ignora esta regla. */
	.hero.tiene-vertical .hero__bg{
		background-image:url('img/hero-vertical.jpg?4');
		background-size:cover !important;
		background-position:50% 36% !important;
		background-repeat:no-repeat;
		background-color:#050810;
		-webkit-mask-image:none !important; mask-image:none !important;
	}
	/* La imagen ya es oscura: el velo solo oscurece la franja
	   inferior donde van el texto y los botones. Arriba se deja
	   limpio para que se vean el nombre y la silueta. */
	.hero.tiene-vertical .hero__veil{
		background:linear-gradient(180deg,
			rgba(5,4,10,.30) 0%,
			rgba(5,4,10,.00) 14%,
			rgba(5,4,10,.00) 46%,
			rgba(5,4,10,.50) 58%,
			rgba(5,4,10,.88) 74%,
			rgba(5,4,10,.97) 88%,
			var(--bg) 100%);
	}
	/* El texto arranca por debajo de la cara del DJ, no encima.
	   Se compacta todo para que los botones y las cifras
	   quepan en pantalla sin tener que bajar. */
	/* El hero se fija a la altura de la pantalla y el contenido
	   se ancla abajo: asi nada se sale ni obliga a hacer scroll. */
	.hero.tiene-vertical{
		height:100svh; min-height:0;
		padding:0 20px 22px;
		justify-content:flex-end;
	}
	.hero.tiene-vertical .hero__inner{ margin-top:0; }
	.hero.tiene-vertical .hero__kicker{ margin-bottom:12px; font-size:.68rem; }
	.hero.tiene-vertical .hero__genres{ margin-bottom:16px; }
	.hero.tiene-vertical .hero__genres span{ font-size:.62rem; padding:5px 11px; }
	.hero.tiene-vertical .hero__sub{ margin-bottom:20px; font-size:.92rem; }
	.hero.tiene-vertical .btn{ padding:13px 26px; font-size:.78rem; }
	.hero.tiene-vertical .hero__actions{ gap:10px; }
	.hero.tiene-vertical .hero__stats{ margin-top:22px; }
	.hero.tiene-vertical .hero__scroll{ display:none; }
	/* Sin el tinte de relleno: aqui la foto llega hasta abajo. */
	.hero.tiene-vertical::before{ display:none; }
	.hero__stats{ margin-top:26px; }
	.visitas__d{ min-width:22px; font-size:1rem; }
	.visitas__digitos{ gap:4px; padding:9px 11px; }
	/* minmax(0,1fr) evita que la columna del nombre colapse a 0 y
	   empuje el resto fuera de la fila en pantallas estrechas.
	   La duracion se oculta: con los dos botones no cabe, y ya
	   se ve en el reproductor de arriba. */
	.trk{ grid-template-columns:24px minmax(0,1fr) auto auto auto auto; gap:5px; padding:13px 10px; }
	.trk__play,
	.trk__dur{ display:none; }
	/* Los botones se quedan solo con el icono: el texto no cabe */
	.trk__vid{ padding:0; width:28px; font-size:.7rem; }
	.trk__vid span{ display:none; }
	.trk__share{ width:28px; font-size:.82rem; }
	.trk__buy{ padding:0 8px; font-size:.6rem; }
	.trk__like{ padding:0 7px; min-width:28px; gap:3px; }
	.trk__like-ico{ font-size:.88rem; }
	.trk__like-n{ font-size:.66rem; }
	.field--row{ grid-template-columns:1fr; }
	.gallery{ grid-auto-rows:170px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
	.gal--wide{ grid-column:span 1; }
	.contact__form{ padding:22px; }
	.player{ padding:20px; }
}

@media (prefers-reduced-motion:reduce){
	*{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
	html{ scroll-behavior:auto; }
}