/* /about/ · estilos propios (solo se cargan en esta página). Sobre plantillas.css: el bloque
   «Why we built it» con varios párrafos, las cuatro creencias sin tarjeta huérfana y la ficha
   de la empresa. Solo tokens de tokens.css. */

/* Por qué existe: párrafos seguidos y una frase de remate en el acento sobre oscuro. */
.about-porque p + p { margin-top: var(--sp-16); }
.about-porque p { color: var(--arg-on-dark-weak); }
.about-porque .about-porque__remate { color: var(--arg-on-dark-accent); font-weight: 600; }

/* Cuatro creencias: 2 × 2 hasta 1279 px y una fila de cuatro en pantallas anchas (nunca 3 + 1). */
@media (min-width: 1024px) {
	.about-creencias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.about-creencias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ficha de la empresa: icono + nombre legal y dirección, dentro de una tarjeta. */
.about-empresa {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16);
	max-width: 800px; padding: var(--sp-24);
	background: var(--arg-surface); border: 1px solid var(--arg-border); border-radius: var(--radius-md);
}
.about-empresa__datos {
	display: grid; gap: var(--sp-4); margin-top: var(--sp-16);
	font-style: normal; font-size: var(--fs-18); line-height: 1.5; overflow-wrap: anywhere;
}
.about-empresa__contacto { margin-top: var(--sp-16); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
@media (min-width: 600px) {
	.about-empresa { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-24); padding: var(--sp-32); }
}