body,
	html {
		height: 100%;
		margin: 0;
		color: #fff;
		text-align: center;
		font-family: 'Inter', sans-serif;
	}

	a {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	/* SECCIÓN PRINCIPAL */
	#hero {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	@media (max-width: 767.98px) {
		#hero {
			height: auto;
		}
	}

	#hero video, .hero-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		object-fit: cover;
		z-index: -2;
	}

	/* Vigneta blanca */
	#hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.65);
		z-index: -1;
	}

	.hero-content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		padding: 20px;
	}

	h1 {
		font-size: 2.5rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}

	p.intro-text {
		max-width: 600px;
		margin: 0 auto 2rem;
		font-size: 1.1rem;
		color: #eee;
	}

	/* PLAYER */
	.player {
		min-width: 300px;
		background: #28a745;
		opacity: 0.9;
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 2rem;
	}

	.progress-container {
		width: 100%;
		height: 6px;
		background: #555;
		border-radius: 3px;
		cursor: pointer;
		margin-bottom: 1rem;
		position: relative;
	}

	.progress-bar {
		height: 6px;
		background: #ffffff;
		border-radius: 3px;
		width: 0%;
		transition: width 0.1s linear;
	}

	.song-title {
		font-size: 1.1rem;
		margin-bottom: 10px;
		font-weight: 500;
	}

	.btn-music {
		background-color: transparent;
		border: 1px solid #fff;
		color: #fff;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 1.2rem;
	}

	.btn-music:hover {
		background-color: #fff;
		color: #000;
	}

	.btn-support {
		background-color: #2a8c35;
		border: none;
		color: #fff;
		padding: 12px 30px;
		border-radius: 30px;
		text-decoration: none;
		font-weight: 500;
	}

	.btn-support:hover {
		background-color: #1e6727;
		color: #fff;
		text-decoration: none ! important;
	}

	.logo {
		max-width: 300px;
	}

	.footer-note {
		font-size: 0.8rem;
		color: #ccc;
	}

	.estreno{
		opacity: 0.5;
		pointer-events: none;
	}