/* ==========================================================================
   MULTIMEDIOS CATARATAS 94.7 — RESPONSIVE
   ========================================================================== */

/* Desktop grande / Notebooks */
@media (max-width: 1400px) {
	.main-dashboard {
		grid-template-columns: 280px 1fr 340px;
		gap: 22px;
		padding: 0 25px 30px 25px;
	}
	.section-full { padding: 10px 25px 40px 25px; }
}

/* Tablets grandes / Notebooks chicas: columnas apiladas */
@media (max-width: 1200px) {
	.main-dashboard {
		grid-template-columns: 1fr;
	}
	#player {
		order: -1;
	}
	.master-player {
		max-width: 480px;
		margin: 0 auto 20px auto;
	}
	.volume-master-control {
		max-width: 480px;
		margin: 15px auto 0 auto;
	}
}

/* Tablets (portrait): el menú se convierte en panel desplegable con botón hamburguesa */
@media (max-width: 992px) {
	.mc-menu-toggle {
		display: flex;
	}
	.main-nav {
		position: fixed;
		top: 85px;
		left: 0;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		background: var(--panel-dark, #131315);
		border-bottom: 1px solid #222226;
		box-shadow: 0 10px 25px rgba(0,0,0,0.4);
		z-index: 998;
		transition: max-height 0.3s ease;
	}
	.main-nav.is-open {
		max-height: 500px;
	}
	.main-nav ul {
		flex-direction: column;
		gap: 0;
		padding: 8px 20px 16px 20px;
	}
	.main-nav a {
		color: #fff;
		display: block;
		padding: 14px 6px;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		border-radius: 0;
	}
	.main-nav li.active a, .main-nav a:hover {
		background: none;
		color: var(--header-grad-end, #FFCA28);
	}
	.search-box-top {
		width: 180px;
	}
	.hero-title {
		font-size: 2.1rem;
	}
	.playlist-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

/* Programación: el carrusel achica los círculos antes de que el layout se apriete */
@media (max-width: 900px) {
	.prog-carousel { height: 260px; }
	.prog-slide { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
}

/* Celulares */
@media (max-width: 768px) {
	.header-inner {
		padding: 0 20px;
	}
	.search-box-top {
		display: none;
	}
	header.site-header {
		height: 70px;
	}
	.main-nav {
		top: 70px;
	}
	.sub-header-bar {
		top: 70px;
		height: 34px;
	}
	.sub-header-bar span {
		font-size: 0.75rem;
		letter-spacing: 1.5px;
	}
	.scrollable-content {
		padding-top: 104px;
	}
	.hero-section {
		padding: 60px 20px 90px 20px;
	}
	.hero-title {
		font-size: 1.7rem;
	}
	.hero-subtitle {
		font-size: 0.9rem;
	}
	.hero-actions {
		flex-direction: column;
		gap: 10px;
	}
	.hero-actions .btn-premium {
		width: 100%;
		justify-content: center;
	}
	.main-dashboard {
		padding: 0 15px 30px 15px;
	}
	.section-full {
		padding: 5px 15px 35px 15px;
	}
	.panel-box {
		padding: 16px;
	}
	footer.site-footer {
		padding: 0 20px;
	}
	.ranking-item { padding: 10px 12px; gap: 10px; }
	.ranking-pos { font-size: 1.1rem; min-width: 26px; }
	.artistas-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
	.prog-carousel { height: 200px; }
	.prog-slide { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
	.prog-caption strong { font-size: 1rem; }
}

/* Celulares chicos */
@media (max-width: 480px) {
	.brand-text {
		display: none;
	}
	.playlist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-left-brand span {
		display: none;
	}
	.contacto-item { width: 100%; justify-content: center; }
}