/* Hereda estilos de template-home.css para la cabecera usando var globales en el index pero puedes duplicar lo básico si es estrictamente modular */
.template-container { padding: 40px 20px; }
.template-header { text-align: center; margin-bottom: 40px; }
.frase-principal { font-size: 1.5rem; color: var(--color-text-main); font-weight: bold; }

.grid-ayudar { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarjeta-simple { background: var(--color-white); border-radius: var(--border-radius); padding: 30px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease; display: flex; flex-direction: column; break-inside: avoid-column; -webkit-column-break-inside: avoid; margin-bottom: 20px; cursor: pointer; }
.tarjeta-simple:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.tarjeta-simple .tarjeta-titulo { font-size: 1.3rem; color: var(--color-text-main); margin-bottom: 15px; }
.tarjeta-simple .tarjeta-descripcion { font-size: 1rem; color: var(--color-text-light); margin-bottom: 25px; }
.btn-accion { display: inline-block; background: var(--color-btn-blue); color: var(--color-white); text-align: center; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-family: var(--font-ui); position: relative; z-index: 10; }
.btn-accion:hover { background: var(--color-btn-hover); }