/* SAO Reproductor de Radio – página de descarga (/app/descargar/) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #07181c; }
body.dl {
	--dl-text: #ffffff;
	--dl-muted: #c9d6d9;
	--dl-card: rgba(255, 255, 255, .055);
	--dl-line: rgba(255, 255, 255, .12);
	margin: 0;
	min-height: 100vh;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--dl-bg) 90%, #1b7f8a) 0%, color-mix(in srgb, var(--dl-bg) 70%, #07181c) 45%, #07181c 100%);
	background-attachment: fixed;
	color: var(--dl-text);
	font: 18px/1.5 "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 3px; }

.dl-main {
	max-width: 1060px;
	margin: 0 auto;
	padding: calc(0px + env(safe-area-inset-top, 0px)) 20px 40px;
}

/* Cabecera */
.dl-head { text-align: center; padding-top: 26px; }
.dl-head:has(.dl-logo--wide) { padding-top: 0; }
.dl-logo { display: block; margin: 0 auto; width: 104px; height: 104px; border-radius: 50%; background: #fff; object-fit: cover; }
.dl-logo--wide { width: auto; height: auto; max-width: 340px; max-height: 150px; border-radius: 0; background: none; object-fit: contain; }
.dl-head h1 { margin: 26px 0 12px; font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -.005em; }
.dl-head p { margin: 0 auto; max-width: 650px; color: var(--dl-muted); font-size: 19px; line-height: 1.25; }

/* Tarjetas */
.dl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; margin-top: 32px; }
.dl-card {
	display: flex;
	flex-direction: column;
	min-height: 490px;
	padding: 26px 26px 28px;
	border: 1px solid var(--dl-line);
	border-radius: 22px;
	background: var(--dl-card);
}
.dl-card.is-mine { border: 2px solid var(--dl-accent); padding: 25px 25px 27px; }
.dl-card h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 24px; font-weight: 700; line-height: 1.15; }
.dl-ico { flex: 0 0 auto; width: 30px; height: 30px; color: var(--dl-accent); }
.dl-card--desk .dl-ico { width: 26px; height: 26px; }
.dl-card p { margin: 0; color: var(--dl-text); font-size: 17px; line-height: 1.6; }
.dl-card--desk > p:first-of-type { opacity: .92; }

/* Botones */
.dl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 58px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: var(--dl-text);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .15s ease, background-color .15s ease;
}
.dl-btn:hover { background: rgba(255, 255, 255, .18); }
.dl-card.is-mine .dl-btn {
	background: linear-gradient(90deg, var(--dl-accent), color-mix(in srgb, var(--dl-accent) 70%, var(--dl-accent2)));
	box-shadow: 0 10px 28px -12px var(--dl-accent);
}
.dl-card.is-mine .dl-btn:hover { filter: brightness(1.06); }
.dl-btn__ico { width: 24px; height: 24px; }

/* Pasos */
.dl-card ol { margin: 22px 0 0; padding-left: 25px; color: var(--dl-muted); font-size: 18px; line-height: 1.5; }
.dl-card li { padding-left: 2px; }
.dl-card li + li { margin-top: 2px; }
.dl-card strong { color: var(--dl-text); font-weight: 700; }

/* QR */
.dl-qr {
	width: 226px;
	margin: 18px auto 22px;
	padding: 24px;
	border-radius: 14px;
	background: #fff;
}
.dl-qr svg { display: block; width: 100%; height: auto; }

/* Pie */
.dl-links { margin: 38px 0 0; text-align: center; color: var(--dl-muted); font-size: 18px; }
.dl-links a { color: var(--dl-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Móvil y tableta */
@media (max-width: 900px) {
	.dl-cards { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
	.dl-card { min-height: 0; }
	.dl-head h1 { font-size: 32px; }
	.dl-head p { font-size: 17px; }
}
body.dl-mobile .dl-card--desk { display: none; }
@media (max-width: 480px) {
	.dl-main { padding-left: 16px; padding-right: 16px; }
	.dl-logo--wide { max-width: 260px; }
	.dl-head h1 { font-size: 28px; }
	.dl-card { padding: 22px 20px 24px; }
	.dl-card.is-mine { padding: 21px 19px 23px; }
	.dl-btn { font-size: 18px; height: 54px; }
	.dl-links { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }