/* Página Descargas (page-descargas.php). */

/* la rejilla de la cabecera y la entradilla son las comunes (components.css) */

/* --- Secciones ----------------------------------------------------------- */

.descargas__section {
	border-top: 1px solid var(--c-dark);
	padding: 10px var(--edge) 24px;
}

.descargas__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 1.7vw, 24px);
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin-bottom: 14px;
}

.descargas__link,
.descarga-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: clamp(15px, 1.042vw, 20px);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.icon-download { flex: 0 0 auto; }

/* Tarjetas: foto a sangre, título arriba, "_Descargar" abajo a la derecha */
.descargas__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 318px));
	gap: clamp(16px, 2.4vw, 35px);
}

.descarga-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 241 / 275;
	padding: 16px;
	overflow: hidden;
	background: var(--c-cream-light);
	color: var(--c-dark);
}

.descarga-card__media {
	position: absolute;
	inset: 0;
}

.descarga-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Soft scrims keep the title and the CTA legible on any photo */
.descarga-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%),
		linear-gradient(0deg, rgba(27, 27, 26, 0.45) 0%, rgba(27, 27, 26, 0) 30%);
}

.descarga-card__title,
.descarga-card__cta { position: relative; }

.descarga-card__title {
	max-width: 8em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 28px);
	letter-spacing: -0.03em;
	line-height: 1;
}

.descarga-card__cta {
	align-self: flex-end;
	color: var(--c-white);
}

/* La tarjeta entera es el enlace: la rayita crece al señalar cualquier
   punto de ella, no solo el rótulo. */
.descarga-card:hover .rayita { background-size: 100% 0.08em; }

/* Filas simples (logo, imágenes) */
.descargas__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.descargas__row .descargas__heading { margin: 0; }

/* Certificados */
.descargas__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 11px 0;
	border-top: 1px solid rgba(27, 27, 26, 0.15);
	font-size: clamp(15px, 1.042vw, 20px);
}

.descargas__list-format {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-grey-warm);
	margin-left: 6px;
}

/* Tarifas: código + botón | texto + botón, separados por un filete */
.descargas__tarifas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(24px, 3vw, 48px);
	align-items: start;
	margin-top: 6px;
}

.descargas__tarifas-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-right: clamp(24px, 3vw, 48px);
	border-right: 1px solid rgba(27, 27, 26, 0.15);
}

.descargas__tarifas-form input {
	flex: 1 1 200px;
	min-width: 0;
	background: var(--c-cream-light);
	border: 0;
	border-bottom: 1px solid var(--c-dark);
	padding: 9px 12px;
	font-family: var(--font-body);
	font-size: clamp(14px, 0.972vw, 18.7px);
	color: var(--c-dark);
}

.descargas__tarifas-form input[aria-invalid="true"] { border-bottom-color: #b3261e; }

.descargas__tarifas-error {
	flex: 1 0 100%;
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: #b3261e;
}

.descargas__tarifas-aside {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
}

.descargas__tarifas-aside p {
	flex: 1 1 auto;
	max-width: 420px;
	font-size: clamp(13px, 0.903vw, 17.3px);
	line-height: 1.3;
	color: var(--c-grey-warm);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.descargas__hero { grid-template-columns: 1fr; }

	.descargas__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.descargas__tarifas { grid-template-columns: 1fr; gap: 24px; }

	.descargas__tarifas-form { border-right: 0; padding-right: 0; }
}

@media (max-width: 560px) {
	.descargas__cards { grid-template-columns: 1fr; }

	.descargas__tarifas-aside { flex-direction: column; align-items: flex-start; }
}