/* ==========================================================================
   CREATICS · recursos.css — lo propio de /mecanografia/recursos/ (prefijo .cs-rc-).
   Es una página de dos botones: solo hace falta el héroe corto y las dos tarjetas.
   Todo lo demás (cabecera, pie, botones) son los componentes de siempre.
   ========================================================================== */

.cs-rc-hero{padding-block:88px 36px}
.cs-rc-hero__in{gap:12px;align-items:flex-start;max-width:640px}
.cs-rc-hero__t{font-size:var(--text-4xl);line-height:1.06;color:var(--cs-white)}

.cs-rc-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cs-rc-card{--_c:var(--cs-blue);display:flex;flex-direction:column;gap:8px;height:100%;padding:30px 30px 26px;background:var(--color-surface);border:1.5px solid var(--color-border);border-top:6px solid var(--_c);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.cs-rc-card--pink{--_c:var(--cs-pink)}
.cs-rc-card--turquoise{--_c:var(--cs-turquoise)}
.cs-rc-card__t{margin:0;color:var(--_c)}
.cs-rc-card__sub{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-rc-card__txt{margin:4px 0 0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-rc-card .cs-btn{margin-top:auto}
.cs-home .cs-rc-card .cs-btn{min-height:56px}

.cs-rc-vuelta{margin:26px 0 0}

@media (max-width:720px){
	.cs-rc-hero{padding-block:84px 26px}
	.cs-rc-hero__t{font-size:var(--text-3xl)}
	.cs-rc-grid{grid-template-columns:minmax(0,1fr);gap:16px}
	.cs-rc-card{padding:22px 18px 18px}
}